4、D3 数据选择与绑定全解析

D3 数据选择与绑定全解析

1. 选择器基础

在 D3 编程中，选择元素是常见操作，这就需要用到选择器。选择器是指定 DOM 树部分的机制，下面介绍几种常见的选择器类型：
- 类型选择器（type） ：由不区分大小写的标签名组成，如 p 或 svg 。通用选择器 * 是特殊情况，常用于选择器组合，如 div * 表示 <div> 元素的所有后代。
- ID 选择器（#id） ：通过元素的 id 属性值选择单个元素，选择器中属性值前需加 # ，且该属性值在文档中必须唯一。
- 类选择器（.class） ：根据元素的 class 属性值选择元素。文档中多个元素可具有相同类，单个元素也可拥有多个类（在 class 属性中用空格分隔），类名前需加 . 。
- 伪类选择器（:pseudo - class） ：根据元素在文档中的状态或位置选择元素，有几十种伪类被识别，如 :hover 和 :visited （后者仅用于链接）。基于元素在文档中位置匹配的伪类很重要，如 :first - child 、 :first - of - typ