《D3.js数据可视化实战手册》——2.3 选取多个元素

本节书摘来异步社区《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

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 

本例的效果如图。

2.3.3 工作原理

你可能会注意到，上面的例子和单元素选择器的版本非常类似。这正是D3选择器的强大之处。无论处理多少个元素，修饰函数都是不变的。我们前面提到的所有修饰函数都能够直接应用于多元素选集，也就是说，D3选集是基于集合的。

尽管上面的示例表达的意思已经足够清晰，我们仍然要详细分析一下。在行A中，d3.selectAll方法选取了页面上的所有div元素，该方法返回一个包含3个div元素的选集对象。然后，在行B中，我们对这一选集调用attr函数，将这3个元素的class属性都设置为red box。从本例可见，选择和操作的相关代码都非常统一，即便页面出现更多的div元素，也不用改变原有代码。尽管这在这里看来无足轻重，但在后面的章节中，我们将更深地体会到这种方式将令代码简单且容易维护。

Python数据分析系列01-数据可视化展示 人生总是在不断的经历机遇与挑战，尽管现在的人很多都会选择躺平，但不得不承认的是，即便是一个躺平的人，同样会遇到一些生活中的挑战，而当你没有办法回避的时候，也就只能迎难而上了。 我们不该因为困难就轻易放弃，因为一切都会更加的值得。
异步社区 异步社区(www.epubit.com)是人民邮电出版社旗下IT专业图书旗舰社区，也是国内领先的IT专业图书社区，致力于优质学习内容的出版和分享，实现了纸书电子书的同步上架，于2015年8月上线运营。公众号【异步图书】，每日赠送异步新书。