D3.js是基于数据驱动文档的JavaScript库，通过操作SVG/HTML/CSS将数据映射为可视元素，核心流程为绑定数据→生成元素→应用变换与样式。
D3.js 是一个基于数据驱动文档（Data-Driven Documents）的 JavaScript 库，它不直接提供现成的图表组件，而是通过操作 SVG、HTML 和 CSS，将数据映射为可视元素。实现数据可视化的核心在于“绑定数据 → 生成元素 → 应用变换与样式”。下面分几个关键环节说明如何用 D3.js 绘制基础图表。
准备环境与基础结构
引入 D3.js 最简单的方式是通过 CDN：
<script src="https://d3js.org/d3.v7.min.js"></script>
确保页面中有一个容器（如 或 ），D3 将在其内部动态创建图形元素。推荐使用
，因为 D3 对 SVG 的坐标、路径、缩放等支持最成熟。
立即学习“Java免费学习笔记（深入）”；
数据绑定与元素生成
D3 的核心方法是 selection.data().enter().append() 流程：
cn-json-diff
比较两个 JSON 文件并显示差异。支持嵌套结构、数组及值变更。纯 Python 标准库实现，无需 API 密钥。
下载
-
d3.select("svg") 选中 SVG 容器
-
.selectAll("circle") 选择所有待绑定的圆（即使尚不存在）
-
.data([10, 20, 30]) 将数组绑定到选择集
-
.enter().append("circle") 为每个新数据项创建一个
- 再用 .attr("cx", (d, i) => i * 50 + 30) 和 .attr("cy", d => 100 - d) 设置位置
- 最后用 .attr("r", d => d / 5) 控制半径大小
这样就用三行数据画出了三个不同大小和位置的圆点——这是柱状图、散点图的起点。
添加坐标轴与比例尺
真实图表需要可读的刻度和标尺。D3 提供 scaleLinear()、scaleBand() 等比例尺，把数据值映射为像素位置：
- 定义 X 轴比例尺：const x = d3.scaleBand().domain(data.map((_, i) => i)).range([20, width - 20]).padding(0.1);
- 定义 Y 轴比例尺：const y = d3.scaleLinear().domain([0, d3.max(data)]).range([height - 20, 20]);
- 用 d3.axisBottom(x) 生成 X 轴生成器，再调用 svg.append("g").call(d3.axisBottom(x)) 渲染
比例尺让数据自动适配画布尺寸，避免硬编码像素值，也方便后续响应式调整。
交互与更新逻辑
D3 支持数据变更后的平滑过渡。例如更新数据后重新绑定：
- 调用 selection.data(newData) 触发 enter/update/exit 三阶段
- 对进入（enter）元素设初始状态，如 .attr("opacity", 0)
- 对更新（update）元素设目标状态，如 .transition().duration(500).attr("r", d => d / 5)
- 对退出（exit）元素设消失动画，如 .transition().remove()
配合鼠标事件（如 .on("click", (event, d) => console.log(d))），就能实现高亮、筛选、联动等交互效果。
