d3.js:数据可视化利器之 selection：选择集

 

选择集/selection

选择集/selection是d3中的核心对象，用来封装一组从当前HTML文档中选中的元素：

d3提供了两个方法用来建立selection对象：

• select(selector) ： 只使用第一个匹配的元素建立选择集。
• selectAll(selector) : 使用所有匹配的元素建立选择集。

select：选中单个元素

select()方法用来建立最多只包含一个DOM元素的选择集。若是当前文档中 没有匹配的元素，则创建一个空选择集；若是当前文档中有多个匹配的元素， 也只用第一个匹配元素创建选择集。

有两种方法调用select()：

• 使用CSS3选择符指定匹配条件

最经常使用的调用方法是传入一个CSS3选择符字符串：

1. d3.select(selector)

• 将DOM对象转化为选择集对象

有时咱们须要将一个DOM对象转化为一个选择集对象，这时能够直接向select() 方法传入这个DOM对象：

1. d3.select(node)

一种常见的应用场景是在事件回调函数中，将this转化成选择集对象： d3.select(this)，由于这时this指向触发事件的DOM元素。

selectAll：选中多个元素

selectAll()方法用来建立可包含多个DOM元素的选择集。若是当前文档中 没有匹配的元素，则创建一个空选择集；若是当前文档中有多个匹配的元素， 则使用全部匹配元素创建选择集。

和select()方法同样，也有两种方式调用selectAll()方法：

• 使用CSS3选择符指定匹配条件

最经常使用的调用方法是传入一个CSS3选择符字符串：

1. d3.selectAll(selector)

• 将一组DOM对象转化为选择集对象

若是已经得到了一组DOM对象，能够直接将其转化为选择集对象：

1. d3.selectAll(nodes)

好比，在事件回调函数中，使用d3.select(this.childNodes)建立选择集。

为何须要选择集？

d3定义选择集对象的一个目的是封装对DOM的操做。选择集提供了众多的方法（d3称之为 操做符/operator）来进行DOM操做，好比设置属性、样式、文本内容以及监听 DOM事件等。从这个角度看，d3的选择集对象相似于jQuery中的$对象，若是你 从jQuery过来，应该容易理解这一点：

1. var s = d3.selectAll("div"); //选中全部div元素建立选择集对象:s
2. s.text("demo"); //使用选择集对象的text()方法设置这些div元素的文本内容
3. var $s = $("div"); //选中全部div元素建立jQuery对象:$s
4. $s.text("demo"); //使用jQuery对象的text()方法设置这些div元素的文本内容

有趣的是，d3的选择集对象和jQuery对象同样，也具备链式调用的能力。绝大多数的选择 集操做符返回的结果仍是一个选择集（可能和最初的选择集内容不同），这使得调用能够持续下去， 像一条流水线：

容易理解，选择集是d3中文档处理流水线的开端，选择集的操做符就是流水线中的各个 处理环节，当选择集流过流水线，原始文档的修改就天然而然地发生了。

 

插入数据驱动环节

d3定义选择集对象的更深层次的目的是封装数据驱动能力。经过data() 操做符，d3使数据化可视化工做者可以以一种声明式的方式指定处理流水线，从而 简化从数据到文档的处理过程：

和style()这样的操做符不一样，data()操做符可以改变选择集的内容。 当选择集流过style()环节后，选择集的内容并没有变化，变化的是选择集中 各个DOM对象的属性。然而，当一个选择集流过data()环节后，将得到一个不一样的选择集： 所包含的DOM对象发生了变化。

each: 定制处理行为

each()方法容许咱们定制对选择集中DOM元素的处理行为：

1. selection.each(func)

参数func是调用者定义的函数，在d3中被称为访问器/accessor。 d3将对选择集中的每个DOM对象，依次调用该访问器函数。

在调用访问器函数时，d3会将this指向当前要处理的DOM对象， 并传入两个参数：

• datum : 当前DOM对象对应的数据
• index ：当前DOM对象在集合中的序号

能够认为访问器是d3流水线中每一个处理环节用户逻辑的封装接口，d3经过这个接口， 实现了流水线框架和用户处理逻辑的解耦：

几乎全部的操做符在内部实现中都使用了each()，每当d3提供的操做符 不能知足你的需求时，都不妨试一试each()。

示例演示：http://www.hubwiz.com/course/54fd40cfe564e50d50dcf284/

参考资料：http://www.hubwiz.com/