title: 【D3.js】1.18-给 D3 标签添加样式
date: 2022-12-02 14:44
tags: [JavaScript,CSS,HTML,D3.js,SVG]
标签也可以添加样式。
一、学习目标
- 如何设置字体大小？
.attr(“font-size”,25)
- 如何填充颜色？
.attr(“fill”,“red”)
二、题目
将 text 元素的 font-size 设置为 25px，文本颜色设置为红色（red）。
三、通关代码
<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) => d * 3)
.attr("fill", "navy");
svg.selectAll("text")
.data(dataset)
.enter()
.append("text")
.text((d) => d)
.attr("x", (d, i) => i * 30)
.attr("y", (d, i) => h - (3 * d) - 3)
// 在这行下面添加代码
.attr("font-size",25)
.attr("fill","red")
// 在这行上面添加代码
</script>
</body>
参考
- 用 D3 实现数据可视化: 给 D3 标签添加样式 | freeCodeCamp.org
更新
前往【D3.js】1.18-给 D3 标签添加样式 | 张鹏帅的官方网站查看更新。
![[操作系统笔记]连续分配管理方式](https://img-blog.csdnimg.cn/9bbadbfc7ebf438ca0f67a30fb3e69ff.png#pic_center)
