D3.js数据可视化实战手册

第2章 精挑细选

本章涵盖以下内容：

◆ 选取单个元素

◆ 选取多个元素

◆ 迭代选集中的元素

◆ 使用子选择器

◆ 函数级联调用

◆ 处理原始选集

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选择器语法。 ...