本文详细介绍如何使用 D3.js 库创建一个包含柱形、坐标轴、刻度和数值标签的基础柱状图。通过定义 SVG 画布、设置边距、配置 x 轴和 y 轴的比例尺，并绑定数据数组，展示完整的实现代码。相比 ECharts，D3.js 提供了更高的自由度和底层控制能力，适合希望深入理解数据可视化原理的开发者参考。
D3.js 基础柱状图实现步骤
首先展示最终的效果图：
该图表包含了柱状图的所有基础构成要素，包括矩形柱体、坐标轴、刻度标记以及对应的数值显示。
虽然 D3.js 的直接使用复杂度高于 ECharts，但它赋予了开发者更高的自由度和定制能力。
接下来详细解析实现过程。
//确定画布的大小
var width = 400;
var height = 400;
//在 body 里添加一个 SVG 画布
var svg = d3.select("body")
.append("svg")
.attr("width", width)
.attr("height", height);
//定义画布周围空白的地方
var padding = {left: 30, right: 30, top: 20, bottom: 20};
//定义一个数组
var dataset = [10, 20, 30, 40, 30, 20, 10, 5];
//x轴的比例尺
var xScale = d3.scale.ordinal()
.domain(d3.range(dataset.length))
.rangeRoundBands([0, width - padding.left - padding.right]);
//y轴的比例尺
var yScale = d3.scale.linear()
.domain([0, d3.max(dataset)])
.range([height - padding.top - padding.bottom, 0]);
//定义x轴
var xAxis = d3.svg.axis()
.scale(xScale)
.orient("bottom");
//定义y轴
var yAxis = d3.svg.axis()
.scale(yScale)
.orient("left");
//矩形之间的空白
var rectPadding = 4;
//添加矩形元素
var rects = svg.selectAll(".MyRect")
.data(dataset)
.enter()
.append("rect")
.attr("class", "MyRect")
.attr("fill", "steelblue")
.attr("transform", "translate(" + padding.left + "," + padding.top + ")")
.attr("x", function (d, i) {
return xScale(i) + rectPadding / 2;
})
.attr("y", function (d) {
return yScale(d);
})
.attr("width", xScale.rangeBand() - rectPadding)
.attr("height", function (d) {
return height - padding.top - padding.bottom - yScale(d);
});
//添加文字元素
var texts = svg.selectAll(".MyText")
.data(dataset)
.enter()
.append("text")
.attr("class", "MyText")
.attr("fill", "white")
.attr("text-anchor", "middle")
.attr("transform", "translate(" + padding.left + "," + padding.top + ")")
.attr("x", function (d, i) {
return xScale(i) + rectPadding / 2;
})
.attr("y", function (d) {
return yScale(d);
})
.attr("dx", function () {
return (xScale.rangeBand() - rectPadding) / 2;
})
.attr("dy", function (d) {
return 20;
})
.text(function (d) {
return d;
});
//添加x轴
svg.append("g")
.attr("class", "axis")
.attr("transform", "translate(" + padding.left + "," + (height - padding.bottom) + ")")
.call(xAxis);
//添加y轴
svg.append("g")
.attr("class", "axis")
.attr("transform", "translate(" + padding.left + "," + padding.top + ")")
.call(yAxis);总结
以上便是利用 D3.js 构建最简柱状图的完整示例。希望本文内容能协助初学者掌握 D3.js 的基本用法。如有任何疑问，欢迎留言交流，感谢支持。