本文详细讲解使用 D3.js 绘制柱状图的核心流程，涵盖数据绑定、线性与序数比例尺的设置、坐标轴绘制及视觉优化。重点解析 Y 轴向下映射导致的图形异常原因，并通过调整高度计算、设置 padding 和 nice 属性提升图表美观度，提供完整代码示例与关键参数说明。
在掌握 SVG 基础、D3.js 核心概念以及比例尺这一绘图关键要素后，即可着手构建具体图表。本节将以柱状图为例，严格遵循标准绘制流程，逐步实现目标图形。具体效果可参考在线演示。
获取处理数据
// 定义数据，d3有d3.json 和 d3.csv 获取json和表格数据，后面章节会涉及
const data = [
{ name: "外包", value: 3000 },
{ name: "金融", value: 4754 },
{ name: "制造", value: 1120 },
{ name: "咨询", value: 4032 }
];
// 获取y轴的值
const yValue = (d) => d.value;
// 获取x轴的值
const xValue = (d) => d.name;
设置图表大小位置信息
const dimensions = {
width: 600, // 画布宽度
height: 600, // 画布高度
margin: {
top: 15,
right: 15,
bottom: 40,
left: 60
}
}
// 图表宽度
dimensions.boundedWidth =
dimensions.width - dimensions.margin.left - dimensions.margin.right;
// 图表高度
dimensions.boundedHeight =
dimensions.height - dimensions.margin.top - dimensions.margin.bottom;
绘制画布
const svg = d3
.select("#root")
.append("svg")
.attr("width", dimensions.width)
.attr("height", dimensions.height);
创建比例尺
// y轴为线性比例尺
const yScale = d3.scaleLinear()
.domain([0, d3.max(data, (d) => yValue(d))])
.range([dimensions.boundedHeight, 0]);
// d3.max 取最大值，d3.min 取最小值
// 序数比例尺 可以通过 xScale.bandwidth() 获取柱状图的宽度
const xScale = d3.scaleBand()
.domain(data.map((d) => xValue(d)))
.range([0, dimensions.boundedWidth])
// 颜色比例尺
const color = d3.scaleOrdinal(d3.schemePastel2);
由于 SVG 坐标系中 Y 轴方向向下，因此 range(max, min) 的输出域范围必须设定为从大到小。
绘制数据
const chartG = svg
.append("g")
.style("transform",`translate(${dimensions.margin.left}px, ${dimensions.margin.top}px)`
);
chartG.selectAll("rect")
.data(data)
.join("rect")
.attr("x", (d) => xScale(xValue(d)))
.attr("y", (d) => yScale(yValue(d)))
.attr("width", xScale.bandwidth())
.attr("height", (d) => yScale(yValue(d)))
.attr("fill", (d, i) => color(i));
出现上述视觉效果的原因分析：
- Y 轴坐标从上至下递增，定位时需计算
yScale(yValue(d))，并应用range([dimensions.boundedHeight, 0])映射规则。数值越大，对应的 Y 坐标值越小。以最大值金融4754为例，其计算出的高度为 0，因此无法显示。 - 根据几何关系可知，
y + height = boundedHeight，进而推导出height = boundedHeight - y。
chartG.selectAll("rect")
.data(data)
.join("rect")
...
.attr("height", (d) => dimensions.boundedHeight - yScale(yValue(d)))
绘制坐标轴
// d3 提供了 axisBottom axisLeft 来绘制坐标轴
const xAxis = d3.axisBottom(xScale);
chartG.append("g")
.call(xAxis)
// x 轴 默认位置在(0,0)，所以需要往下移
.attr("transform", `translate(0, ${dimensions.boundedHeight})`);
const yAxis = d3.axisLeft(yScale);
chartG.append("g").call(yAxis);
优化
完成上述步骤后，柱状图的基本框架已构建完毕。后续可添加图例、交互效果等优化内容，但本章暂不展开，主要聚焦于调整柱状图之间的间距。
const xScale = d3
.scaleBand()
.domain(data.map((d) => xValue(d)))
.range([0, dimensions.boundedWidth])
.padding(0.2); // padding 百分比的值
tickSize 和 nice 属性
// 我们把 y轴的 刻度线延长(tickSize)
const yAxis = d3.axisLeft(yScale).tickSize(-dimensions.boundedWidth);
观察图表可见，除最上方刻度线外，其余刻度间距均匀。这是因为设定的最大值固定为 4754。为提升视觉美观度，可引入 nice 属性进行优化。
const yScale = d3
.scaleLinear()
.domain([0, d3.max(data, (d) => yValue(d))])
.range([dimensions.boundedHeight, 0])
.nice();
当域值根据实际数据自动计算时，起始值和结束值可能非整数。这虽不影响功能，但可能影响视觉整洁度。D3.js 提供的 方法可将域值四舍五入至更规整的数值。
至此，关于 D3.js 实现绘制柱状图的教程详解部分介绍完毕。如需了解更多 D3.js 绘制柱状图相关内容，请搜索本站往期文章或继续阅读后续文章。感谢大家的支持！