开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的20天，点击查看活动详情
更改 SVG 元素的颜色
介绍
所有条形图的位置都是正确的，但是它们都是一样的黑色。 SVG 可以改变条形图的颜色。
在 SVG 中， rect 图形用 fill 属性着色。 它支持十六进制代码、颜色名称、rgb 值以及更复杂的选项，比如渐变和透明。
实操
添加 attr() 方法，将所有条形图的 fill 设置为海军蓝。
- 所有条形图的
fill颜色都应该是 navy（海军蓝）。
<body>
<script>
const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9];
const w = 500;
const h = 100;
const svg = d3.select("body")
.append("svg")
.attr("width", w)
.attr("height", h);
svg.selectAll("rect")
.data(dataset)
.enter()
.append("rect")
.attr("x", (d, i) => i * 30)
.attr("y", (d, i) => h - 3 * d)
.attr("width", 25)
.attr("height", (d, i) => 3 * d)
.attr("fill","navy")
</script>
</body>
给 D3 元素添加标签
介绍
D3 允许你使用 SVG 的 text 元素给图形元素，如条形图，添加标签。
和 rect 元素类似，text 元素也需要 x 和 y 属性来指定其放置在 SVG 画布上的位置， 它也需要能够获取数据来显示数据值。
D3 给了你很高的权限给图形添加标签。
实操
编辑器中的代码已经将数据绑定到每个新的 text 元素。 首先，在 svg 中添加 text 节点。 然后，添加 x 和 y 坐标属性， 它们的计算方法应该和 rect 中计算方法相同，除了 text 的 y 值应该使标签比条形图的高 3 个单位。 最后，用 D3 的 text() 方法将标签设置为和数据点相等的值。
注意： 对于标签比条形图高的情况，应决定 text 的 y 值应比条形图的 y 值大还是小 3 个单位。
- 第一个
text元素应有一个值为12的标签，且y值为61。 - 第二个
text元素应有一个值为31的标签，且y值为4。 - 第三个
text元素应有一个值为22的标签，且y值为31。 - 第四个
text元素应有一个值为17的标签，且y值为46。 - 第五个
text元素应有一个值为25的标签，且y值为22。 - 第六个
text元素应有一个值为18的标签，且y值为43。 - 第七个
text元素应有一个值为29的标签，且y值为10。 - 第八个
text元素应有一个值为14的标签，其y值为55。 - 第九个
text元素应有一个值为9的标签，且y值为70。
<body>
<script>
const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9];
const w = 500;
const h = 100;
const svg = d3.select("body")
.append("svg")
.attr("width", w)
.attr("height", h);
svg.selectAll("rect")
.data(dataset)
.enter()
.append("rect")
.attr("x", (d, i) => i * 30)
.attr("y", (d, i) => h - 3 * d)
.attr("width", 25)
.attr("height", (d, i) => 3 * d)
.attr("fill", "navy");
svg.selectAll("text")
.data(dataset)
.enter()
.append("text")
.attr("x", (d, i) => i * 30)
.attr("y", (d, i) => (h - 3 * d) - 3)
.text(d=>d)
</script>
<body>
