D3.js 是基于数据驱动文档的 JavaScript 库，通过 data()、enter()、update()、exit() 实现数据与 DOM 动态绑定，结合比例尺、SVG、力导向布局、过渡缩放等能力构建高度定制化交互图表。
D3.js 是一个基于数据驱动文档（Data-Driven Documents）的 JavaScript 库，擅长将数据映射为 DOM 元素（如 SVG、HTML），从而实现高度定制化的可视化。它不提供现成的“图表组件”，而是提供底层工具链——选中元素、绑定数据、响应更新、过渡动画、比例尺、坐标系、力导向布局等。因此，“创建复杂图表”本质是组合这些能力，而非调用一个函数。
理解 D3 的核心思想：数据绑定与动态更新
D3 最关键的机制是 data()、enter()、update() 和 exit()。它把数据和 DOM 元素建立关联，并自动处理新增、变化、删除三种状态：
- data()：将数组绑定到选择集，返回更新后的选择集
- enter()：生成占位节点，对应“数据多于现有元素”的部分
- update()：已存在且有对应数据的元素，用于修改属性或样式
- exit()：数据已不存在但 DOM 还在，用于移除冗余元素
这个模型让图表能随数据实时、高效重绘，是构建交互式复杂图表（如实时仪表盘、可缩放网络图）的基础。
用 SVG + 比例尺绘制基础坐标图表（如折线图）
复杂图表往往从基础坐标系统起步。D3 提供 d3.scaleLinear()、d3.scaleBand() 等比例尺，把数据值映射为像素位置：
立即学习“Java免费学习笔记（深入）”；
- 定义 X 轴比例尺：用
d3.scaleTime()处理日期，或d3.scaleLinear()处理数值，设定 domain（原始数据范围）和 range（SVG 容器像素范围） - 定义 Y 轴比例尺：注意 SVG 坐标系 Y 向下增长，通常需反转 range（如
[height, 0]） - 用
d3.line()生成路径字符串：传入 x/y 访问器函数，自动连接数据点 - 将
<path>插入 SVG，并设置d属性为 line 生成的路径
构建关系型/网络图：力导向布局（Force Layout）
对于节点-链接图（如组织架构、知识图谱），d3.forceSimulation() 是核心：
- 输入节点（nodes）和链接（links）数组，每个节点含 id，每条链接含 source 和 target（可为 id 或对象引用）
- 配置力：如
forceManyBody()（节点间斥力）、forceLink()（链接引力）、forceCenter()（居中约束） - 监听
tick事件，在每次迭代中更新<circle>的 cx/cy 和<line>的 x1/y1/x2/y2 - 支持拖拽交互：用
d3.drag()绑定到节点，调用simulation.alphaTarget(0.3).restart()保持运动惯性
增强交互与响应：过渡、缩放、提示框
复杂图表离不开用户操作反馈：
-
过渡动画：在设置属性前链式调用
.transition().duration(500)，D3 自动插值（如颜色、位置、大小） -
缩放平移：用
d3.zoom()监听容器事件，通过transform更新整个<g>组的 transform 属性，并同步更新轴线 -
悬停提示：监听
mouseover，用绝对定位<div class="tooltip">显示数据详情；结合d3.pointer(event)获取鼠标位置精准定位
不复杂但容易忽略：所有交互逻辑都应围绕数据绑定展开，避免直接操作 DOM 冗余状态。保持“数据 → 视图”单向流动，才能稳定支撑复杂场景。
