title: 【D3.js】1.16-更改 SVG 元素的颜色
date: 2022-12-02 14:24
tags: [JavaScript,CSS,HTML,D3.js,SVG]
至此,一个较为完整的rect图已经完成了,但是所有的rect都是黑色。
一、学习目标
- 如何着色
.attr(“fill”,“navy”);
二、题目
添加 attr() 方法,将所有条形图的 fill 设置为海军蓝。
三、通关代码
<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>