3、D3 选择器 API 全面解析

D3 选择器 API 全面解析

1. 引言

在数据可视化项目中，选择页面上的特定元素是一项基本任务。虽然 W3C 标准化的 CSS 选择器 API 为现代浏览器所支持，但它在数据可视化领域存在一定的局限性。例如，使用标准选择器 API 时，要操作选中的元素，需要手动遍历每个元素，这在处理大量元素时会变得十分繁琐。

var i = document.querySelectorAll("p").iterator();
var e;
while(e = i.next()){
  // do something with each element selected
  console.log(e);
}

为了解决这个问题，D3 引入了自己的选择器 API，大大简化了开发过程。接下来，我们将详细介绍 D3 选择器 API 的工作原理和强大功能。

2. CSS3 选择器基础

D3 的选择器 API 基于 W3C 三级选择器（通常称为 CSS3 选择器）构建。以下是一些常见的 CSS3 选择器语法：
| 选择器语法 | 描述 | 示例 |
| ---- | ---- | ---- |
| #foo | 选择 id 为 foo 的元素 | <div id="foo"> |
| foo | 选择标签名为 foo 的元素 | <foo> |
| .foo | 选择 class 为 foo 的元素 | <div clas