本节书摘来异步社区《D3.js数据可视化实战手册》一书中的第2章，第2.3节，作者： 【加拿大】Nick Qi Zhu，更多章节内容可以访问云栖社区“异步社区”公众号查看。
2.3 选取多个元素
通常情况下，我们很少只选取单个元素，相反大多数情况下是对页面上的多个元素进行特定处理。在下面的例子中，我们将介绍D3的多元素选择器及其API。
2.3.1 准备阶段
在浏览器中打开如下文件的本地副本。
https://github.com/NickQiZhu/d3-cookbook/blob/master/src/chapter2/multiple-selection.html
AI 代码解读
2.3.2 开始编程
本例展示了d3.selectAll函数的用途。我们选取3个不同的div元素，利用CSS的class同时为其添加效果。
<div></div>
<div></div>
<div></div>
<script type="text/javascript">
d3.selectAll("div") // <-- A
.attr("class", "red box"); // <-- B
</script>
AI 代码解读
本例的效果如图。
2.3.3 工作原理
你可能会注意到，上面的例子和单元素选择器的版本非常类似。这正是D3选择器的强大之处。无论处理多少个元素，修饰函数都是不变的。我们前面提到的所有修饰函数都能够直接应用于多元素选集，也就是说，D3选集是基于集合的。
尽管上面的示例表达的意思已经足够清晰，我们仍然要详细分析一下。在行A中，d3.selectAll方法选取了页面上的所有div元素，该方法返回一个包含3个div元素的选集对象。然后，在行B中，我们对这一选集调用attr函数，将这3个元素的class属性都设置为red box。从本例可见，选择和操作的相关代码都非常统一，即便页面出现更多的div元素，也不用改变原有代码。尽管这在这里看来无足轻重，但在后面的章节中，我们将更深地体会到这种方式将令代码简单且容易维护。
