D3.js的核心在于数据绑定与DOM操作，通过选择集将数据关联到元素，利用enter-update-exit模式实现动态更新；结合比例尺映射数据范围，使用轴组件生成坐标轴，从而构建可交互的可视化图表。
D3.js 是一个强大的 JavaScript 库，用于在网页上创建数据驱动的动态可视化。它的核心理念是将数据绑定到 DOM 元素，并根据数据的变化来操作文档。理解 D3 的几个关键概念，是掌握其使用的基础。
选择集（Selections）与数据绑定（Data Join）
D3 借鉴了 jQuery 的选择器思想，通过 d3.select() 和 d3.selectAll() 选取页面元素，形成“选择集”。这些选择集可以批量操作元素的属性、样式或内容。
真正的强大之处在于数据绑定。使用 selection.data() 方法，D3 将数组中的每个数据项与选中的元素进行关联。这个过程称为“数据连接”（data join），它会生成三种虚拟状态：
- enter()：代表数据多于元素的部分，通常用于添加新元素
- update()：已存在的数据与元素匹配部分
- exit()：代表元素多于数据的部分，常用于删除多余元素
这种模式使得可视化能响应数据变化，实现动态更新。
立即学习“Java免费学习笔记（深入）”；
比例尺（Scales）
原始数据的范围往往不适合直接用于图形绘制（比如 GDP 数值太大，无法作为像素值）。D3 的比例尺用于将输入域（domain）映射到输出范围（range）。
常见类型包括：
Java项目代码review工具。分析Git变更+完整调用链路上下文，推断业务需求，进行多维度评分和分类汇总，生成完整PRD文档。包含细粒度Java代码审查清单（Null安全、异常处理、Streams、并发、equals/hashCode、资源管理、API设计、性能、MyBatis/ORM、事务边界、SQL/DD...
- d3.scaleLinear()：线性映射，适用于连续数值
- d2.scaleTime()：时间轴数据映射
- d3.scaleOrdinal()：分类数据映射，如不同类别的颜色
例如，将数据 [0, 100] 映射到画布宽度 [0, 500] 像素，就可以用线性比例尺自动计算坐标位置。
轴组件（Axes）
D3 提供了 d3.axisLeft()、d3.axisBottom() 等方法，基于比例尺自动生成坐标轴。轴不仅是线条和刻度，还包括标签和网格线。
生成轴后，需将其附加到 SVG 中的一个 g（group）元素上。当数据或比例尺变化时，重新调用轴函数即可更新显示，非常适合动态图表。
进入-更新-退出（Enter-Update-Exit）模式
这是 D3 实现动态可视化的核心模式。每次数据变化时，应重新绑定数据，并区分三种状态：
- enter() 阶段：为新增数据创建元素（如 append 圆形或矩形）
- update 阶段：更新所有现有元素的位置、大小等属性
- exit() 阶段：移除不再对应数据的元素（常配合 transition().remove() 实现淡出效果）
这一模式让开发者能精确控制可视化如何随数据演变，是实现动画和交互的基础。
基本上就这些。掌握选择集、数据绑定、比例尺、轴和更新模式，就具备了使用 D3 构建大多数可视化的能力。虽然学习曲线较陡，但其灵活性和对底层的控制力无可替代。
