D3.js数据可视化教程：JavaScript绘图指南

数据绑定与元素生成

D3 的核心方法是 selection.data().enter().append() 流程：

• 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))），就能实现高亮、筛选、联动等交互效果。

本篇关于《D3.js数据可视化教程：JavaScript绘图指南》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！