2.6 用 D3 设置与修改元素样式
为了让可视化元素拥有想要的外观和感觉，需要为其设置样式。使用传统的 CSS 样式表就是一种不错的方案，通常也是考虑后期可维护性时的优先方案。但有时直接使用 D3 来设置与修改样式属性同样很方便，尤其是在样式随数据动态变化的时候。
D3 通过 selection.style() 方法设置与修改元素的样式属性（attribute）。该方法需要两个参数：样式属性的名称及其属性值，如图 2.16 所示：
图 2.16 style() 方法
回到条形图示例，在 main.js 中，在 SVG 容器选择集上链式调用 style() 方法，即赋值到常量 svg 上的方法。如以下代码所示，使用 style() 方法为 SVG 容器应用边框样式，可以赋值为任何想要的属性值。本例中使用简写样式，设置一个宽度 1px 的黑色边框：
const svg = d3.select(".responsive-svg-container")
.append("svg")
.attr("viewBox", "0 0 1200 1600")
.style("border", "1px solid black");
SVG 容器四周的边框有助于直观了解当前所处的空间区域，并理解 style() 方法的工作原理。
保存项目并在浏览器中查看效果。从 DOM 检查工具中找到 SVG 容器，可以看到 border 属性（property）被添加到了 style 属性（attribute）中，如图 2.17 所示。也就是说 style() 方法注入了所谓的行内样式。
图 2.17 使用 style() 方法生效的边框样式
在处理 SVG 元素时，有些样式可以通过 attribute 属性或行内样式来生效，例如 fill 和 stroke 属性（properties）。至于应该使用 attr() 还是 style() 方法来设置样式并没有严格的规定，但一些开发人员更愿意保持一致，始终使用 CSS 样式表样式（或行内样式）来设置样式，而不是通过元素的 attribute 属性。这也许是一个不错的做法，尤其是在我们希望分开创建形状的代码与设置外观的代码、使得层叠样式更易于管理的时候。本书将使用 attr() 和 style() 方法以及外部 CSS 文件来设置 SVG 元素的视觉属性。
例如，在 main.js 中，在矩形选择集上调用 style() 方法，并对该矩形设置与之前不同的填充色 "plum"，如以下代码所示：
svg
.append("rect")
.attr("x", 10)
.attr("y", 10)
.attr("width", 414)
.attr("height", 16)
.attr("fill", "turquoise")
.style("fill", "plum");
然后打开 main.css 文件，为该矩形添加第三个 fill 属性（property），令其颜色值为 "orange"：
rect {
fill: orange;
}
此时该矩形拥有三种不同的填充样式：一个是通过元素 attribute 属性设置的青绿色 "turquoise"；一个是通过行内样式应用设置的深紫色 "plum"；最后是通过外部 CSS 样式设置的橙黄色 "orange"。当然，实际工作不会这样设置，本例仅供演示。
保存项目，注意观察借助 style 属性设置的 fill 样式是如何覆盖另两种样式的。在图 2.18 中，您可以看到样式中的层叠规则是如何生效的：行内样式覆盖了其余样式，其次是外部 CSS 样式表设置的样式，最后是通过 attribute 属性设置的 fill 样式。牢记这一规则将有助于制定适合自己习惯、团队和项目的策略，同时也可以在遇到下面的问题时摆脱百思不得其解的窘境：为什么这种样式在屏幕上可见、而另一种偏偏就不可见呢？
图 2.18 填充样式 fill 同时在 attribute 属性、外部样式表及行内样式应用的效果对比
至此，我们已经知道如何获取选择集、如何在 DOM 中添加元素、以及如何给这些元素设置方位与样式。但是，真要像示例这样逐一添加条形图的各个矩形条，效率肯定高不了。等下一章学了数据绑定的相关知识后，就能一次性添加所有的矩形条了。在此之前，需要删除 main.js 和 main.css 中与矩形相关的代码，让 main.js 文件只包含如下所示的代码。第三章将从这里开始构建条形图：
代码清单 2.2 本章结束时 main.js 的代码内容
const svg = d3.select(".responsive-svg-container")
.append("svg")
.attr("viewBox", "0 0 1200 1600")
.style("border", "1px solid black");
2.7 本章小结
- D3 项目要有一个 Web 服务器才能正常运行。利用 VS Code 的 Live Server 扩展，可以简单快速地在本地开发环境中搭建一个 Web 服务器。
- 有两种方法将 D3 库加载到项目中：一是在
index.html中添加script标签；二是使用 NPM 模块引入 D3 库。为简单起见，本书前几章使用script标签的方法。 - D3 既可以完整加载整个库，也可以按需加载必要的 D3 模块，从而提高项目性能。
- 通过
script标记加载文件和库时，script标签生效的顺序与浏览器读取脚本的顺序相同。也就是说，引入 D3 的script标签，必须放到使用 D3 的 JavaScript 文件所对应的script标签前面。否则，浏览器将无法访问 JavaScript 文件中的 D3 方法而导致报错。 - D3 使用
d3.select()和d3.selectAll()方法从 DOM 中选择元素。前者只返回第一个元素，而后者返回与其选择器匹配的所有 DOM 元素。 - 作为参数传给
select()和selectAll()方法的字符串选择器，与 CSS 中的选择器相同，均使用标签名、类名、ID 或这些名称的组合来标识 DOM 元素。 append()方法可以将新增元素添加为该选择集的最后一个子元素。attr()方法用于添加或修改元素的attribute属性。它接受两个参数：属性名称与属性值。style()方法可以设置和修改 DOM 元素的style属性（attribute），也需要传两个参数：样式的 property 属性名与属性值。style()方法可以设置行内样式，并覆盖通过外部 CSS 样式表及 attribute 视觉属性设置的样式。
