《D3.js数据可视化实战手册》—— 2.1 简介

2.1 简介

选集（selection）是基于D3的可视化项目的重要基础之一，它用来定位页面上的特定视觉元素。如果你已经熟知W3C的标准CSS选择器，或一些流行的JavaScript库（如jquery或Zepto.js）提供的选择器API，那么掌握D3的选择器API对你来说将易如反掌。不过，即便从未接触过选择器也无妨，本章将借助一些生动的例子，带领你一步步地进入选择器的世界，这些例子涵盖了可视化中的绝大多数应用场景。

所有的现代浏览器都内嵌支持W3C的标准选择器API。然而，在网络开发，尤其数据可视化领域的开发中，这些API仍然具有局限性。它们只提供选择器，却并不提供集合类型。也就是说，虽然选择器API有助于在文档中选择元素，然而为了操作这些元素，你仍然需要遍历每个元素，如以下代码段所示。

var i=document.querySelectorAll("p").iterator();
var e;
while(e=i.next()){
//对每个选中的元素进行操作
console.log(e);
}```
上面的代码先选取了文档中所有的p元素，然后迭代遍历每个元素并进行相应操作。而在可视化项目中，我们需要不断地对页面上不同元素做类似操作，这将很快演变成为单调的反复。为了减少开发中的琐碎工作，D3引入了自己的选择器API。本章接下来会详细介绍D3的API是如何工作的，以及它具有哪些出色的特性。

在深入D3的选择器API之前，需要先介绍一下W3C的3级选择器API。如果你已经掌握了这部分内容，可以跳过本节。D3的选择器API基于3级选择器（也称CSS3选择器）实现。在这一小节，我们先来了解一些常用的CSS3选择器语法。

◆ #foo：选中id为foo的元素

。
◆ foo：选中foo 标签元素。

◆ .foo：选中所有class为foo的元素

。
◆ [foo=goo] ：选中所有属性foo的值为goo的元素

。
◆ foogoo：选中foo元素内的goo子元素。

◆ foo#goo：选中id为goo 的foo元素。

◆ foo.goo：选中class为goo的foo 元素。

◆ foo:first-child：foo 元素的第一个子元素。

//<--选中这一个

◆ foo:nth-child(n)：foo元素的第n个子元素。

//<--foo:nth-child(2)

//<--foo:nth-child(3)

CSS3选择器是一个复杂的话题。这里只列出有助于理解和掌握D3的一些常用选择器，更多信息请访问 W3C 第 3 级选择器 API 官方文档`` http://www. w3.org/TR/css3-selectors/``。

技巧.tif 如果你想要处理的浏览器不支持选择器，则可以尝试在引入D3之前，先引用Sizzle来解决向下兼容的问题。Sizzle的相关资料可参见``http://sizzlejs.com/。W3C``的下一代4级选择器API仍然处于草稿阶段。你可以在此对目前的状态进行预览`` http://dev.w3.org/csswg/selectors4/``。