3、D3 选择器的使用与技巧

D3 选择器的使用与技巧

1. 引言

在数据可视化项目中，选择页面上的特定视觉元素是一项基本任务。虽然现代浏览器支持 W3C 标准化的选择器 API，但它在数据可视化领域存在局限性，因为它只提供选择器，而不提供直接的选择和操作功能。D3 引入了自己的选择 API，使开发更加便捷。

2. CSS3 选择器基础

D3 的选择 API 基于 CSS3 选择器，以下是一些常见的 CSS3 选择器语法：
| 选择器 | 描述 | 示例 |
| ---- | ---- | ---- |
| #foo | 选择 id 为 foo 的元素 | <div id="foo"> |
| foo | 选择元素 foo | <foo> |
| .foo | 选择 class 为 foo 的元素 | <div class="foo"> |
| [foo=goo] | 选择 foo 属性值为 goo 的元素 | <div foo="goo"> |
| foo goo | 选择 foo 元素内的 goo 元素 | <foo><goo></foo> |
| foo#goo | 选择 id 为 goo 的 foo 元素 | <foo id="goo"> |
| foo.goo | 选择 class 为 goo 的 foo 元素 | <