D3 4.x数据可视化实战手册（第2版）

第2章　精挑细选

本章涵盖以下内容：

• 选取单个元素
• 选取多个元素
• 迭代选集中的元素
• 使用子选择器
• 函数级联调用
• 处理原始选集

2.1　简介

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

2.1.1　选集入门

所有的现代浏览器都内嵌支持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的工作原理以及它具有哪些出色的特性。

2.1.2　CSS3选择器入门

在深入D3的选择器API之前，需要先介绍W3C的3级选择器API。如果读者已经掌握了这部分内容，可以跳过本节。D3的选择器API基于3级选择器（也称CSS3选择器）实现。在本节，我们先来了解一些常用的CSS3选择器语法，这些是理解D3的选择器API的基础。下面的列表给出了在数据可视化项目中最常见的CSS3选择器的习惯用法。 ...