《D3.js数据可视化实战手册》——2.5 使用子选择器

本节书摘来异步社区《d3.js数据可视化实战手册》一书中的第2章，第2.5节，作者： 【加拿大】nick qi zhu，更多章节内容可以访问云栖社区“异步社区”公众号查看。

我们常常需要在特定范围下选择元素。例如，选取某个section元素下的所有div元素。本例中，我们将介绍d3中这种需求的不同的实现方式及各自的优缺点。

请在浏览器中打开如下文件的本地副本。

下面的代码分别通过两种不同方式，选取了两个div元素。

代码的视觉效果如图所示。

尽管视觉效果相同，但是这个例子中使用了两种完全不同的子选择技术。我们在这里将分别讨论它们的优缺点，以及各自的使用场合。

3级选择器连接符：在行a中，d3.select方法接受了一个特别的字符串，这个字符串为用大于符号（u+003e, >）连接的两个元素名称。这种语法叫做连接符（这里大于号表示子连接符）。3级选择器支持一些不同的结构连接符。我们先来快速浏览一下一些常用连接符。

后代连接符：这个连接符的语法为selector selector。

后代连接符，顾名思义，用来描述两个选择器之间的广义父子关系。我们称之为广义，是因为第二个选择器可以是第一个选择器的任意后代。让我们来看一些例子。

div em<code>`</code>

由于div是em元素的祖先，所以这个例子选取了其中的em元素。

子连接符：该连接符的语法为selector &gt; selector。

子连接符描述了两个元素之间的严格父子关系。子连接符用一个大于号（u+003e，&gt;）连接两个元素。

使用如下选择器。

d3.select("#section2") // &lt;-- b

从以上代码可以看到，在选择div元素之前，我们在第b-1行中对#section2使用了一个修饰函数。我们在下一节中将进一步探索这种灵活性。