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

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

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

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

◆ #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)