选择对于使用D3的任何数据可视化项目都需要执行的最基本任务之一。 选择帮助您将页面上的某些视觉元素作为目标。 如果您已经熟悉W3C标准化的CSS选择器或流行的JavaScript库（例如jQuery和Zepto.js）提供的其他类似选择器API，那么您会发现自己正好使用D3的选择API。

W3C对选择器支持进行了标准化，因此所有现代Web浏览器都对选择器API内置了支持。 但是，基本的W3C选择器API在进行Web开发时有局限性，尤其是在数据可视化领域。 标准的W3C选择器API仅提供选择器，而不提供选择。 这意味着选择器API可以帮助您选择文档中的元素； 但是，要操作选定的元素，您仍然需要遍历每个元素。 考虑使用标准选择器API的以下代码片段：

var selector = document.querySelectorAll('p'); 
selector.forEach(function(p){ 
    // do something with each element selected 
    console.log(p); 
}); 

前面的代码实质上选择了文档中的所有<p>元素，然后遍历每个元素以执行某些任务。 显然，这很快就会变得很乏味，尤其是当您必须不断操纵页面上的许多不同元素时，这通常是我们在数据可视化项目中所做的。 这就是D3引入自己的选择API的原因，从而使开发工作不再那么麻烦。

在我们深入研究D3的选择API之前，需要对W3C 3级选择器API进行一些基本介绍。D3的选择API是基于3级选择器构建的，或者更通常称为CSS3选择器支持。以下列表包含一些在数据可视化项目中通常会遇到的最常见的CSS3选择器约定：

• #foo：选择以foo作为id值的元素

• foo：选择元素foo

• .foo：选择以foo作为class值的元素

• [foo = goo]：选择具有foo属性值的元素并将其设置为goo

• foo goo：选择foo元素内的goo元素

*   foo＃goo：选择以goo作为id值的foo元素

    ```
<foo id='goo'> 

• foo.goo：选择以goo作为class值的foo元素

• foo：first-child：选择foo元素的第一个子元素

// <-- this one

*   foo：nth-child（n）：选择foo元素的第n个子元素（n是基于子元素的，第一个子元素从1开始）

    ```
<foo> 
<foo> // <-- foo:nth-child(2) 
<foo> // <-- foo:nth-child(3) 

CSS3选择器是一个非常复杂的主题。 在这里，我们仅列出了您需要了解的一些最常见的选择器，并且在使用D3时必须有效。 有关此主题的更多信息，请访问W3C 3级选择器API文档，网址为：http://www.w3.org/TR/css3-selectors/