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>
确保页面中有一个容器（如 svg> 或 ），D3 将在其内部动态创建图形元素。推荐使用
，因为 D3 对 SVG 的坐标、路径、缩放等支持最成熟。
立即学习 “Java免费学习笔记（深入） ”；
数据绑定与元素生成
D3 的核心方法是 selection.data().enter().append() 流程：
免费语音克隆
这是一个提供免费语音克隆服务的平台，用户只需上传或录制一段 5 秒以上的清晰语音样本，平台即可生成与用户声音高度一致的 AI 语音克隆。
下载
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().domai n(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)) ），就能实现高亮、筛选、联动等交互效果。
