【d3.js入门】基本柱状图

D3.js是一种数据可视化的Javascript库。掌握D3.js可以帮助开发者轻松地绘制各种类型的图表，包括基础柱状图。

下面我们以一个示例代码为例，给出绘制基础柱状图的步骤和教程。

步骤1：准备数据

在实际应用中，你需要从数据库或其它地方获取数据。这里我们假设数据已经存在，使用以下代码创建数据集：

var dataset = [10, 20, 30, 40, 33, 24, 12, 5];

步骤2：设置画布大小

我们将定义SVG画布的大小，并选择一个容器元素来放置SVG画布。

var padding = 30; // 定义边距
var svgWidth = 600; // 定义画布宽度
var svgHeight = 400; // 定义画布高度

var svg = d3.select("body") // 选择容器元素
    .append("svg") // 添加SVG元素
    .attr("width", svgWidth) // 设置宽度
    .attr("height", svgHeight) // 设置高度
    .style('border', '1px solid #999999'); // 设置边框样式

步骤3：创建比例尺

我们将使用d3.scaleBand() 和 d3.scaleLinear()函数分别创建x轴和y轴的比例尺。

var xScale = d3.scaleBand() // 创建x轴比例尺
    .domain(d3.range(dataset.length)) // 定义域
    .range([padding, svgWidth - padding]) // 值域
    .padding(0.3); // 添加内边距

var yScale = d3.scaleLinear() // 创建y轴比例尺
    .domain([0, d3.max(dataset)]) // 定义域
    .range([svgHeight - padding, padding]); // 值域

步骤4：创建柱形图

我们将使用d3.selectAll()函数选择所需元素，并使用d3.data()方法将数据绑定到这些元素上。之后，使用d3.enter()和d3.append()方法向画布添加元素。

var barWidth = xScale.bandwidth(); // 计算柱宽度

var bars = svg.selectAll(".bar") // 选择所有柱状元素
    .data(dataset) // 绑定数据
    .enter() 
    .append("rect") // 添加矩形元素
    .attr("class", "bar") // 添加类名
    .attr("fill", "#69b3a2") // 设置填充颜色
    .attr("x", function (d, i) { // 设置x值
        return xScale(i);
    })
    .attr("y", function (d) { // 设置y值
        return yScale(d);
    })
    .attr("width", barWidth) // 设置矩形宽度
    .attr("height", function (d) { // 设置矩形高度
        return svgHeight - yScale(d) - padding;
    });

步骤5：创建坐标轴

最后，我们需要创建x轴和y轴，并使用坐标轴比例尺来刻画它们。

var xAxis = d3.axisBottom(xScale); // 创建x轴比例尺
var yAxis = d3.axisLeft(yScale); // 创建y轴比例尺

svg.append("g") // 添加x轴元素
    .attr("class", "x-axis") // 添加类名
    .attr("transform", "translate(0," + (svgHeight - padding) + ")") // 定义位置
    .call(xAxis); // 绑定比例尺

svg.append("g") // 添加y轴元素
    .attr("class", "y-axis") // 添加类名
    .attr("transform", "translate(" + padding + ",0)") // 定义位置
    .call(yAxis); // 绑定比例尺

完整代码

下面是绘制基础柱状图的完整代码：

var dataset = [10, 20, 30, 40, 33, 24, 12, 5];

var padding = 30;
var svgWidth = 600;
var svgHeight = 400;

var xScale = d3.scaleBand()
    .domain(d3.range(dataset.length))
    .range([padding, svgWidth - padding])
    .padding(0.3)

var yScale = d3.scaleLinear()
    .domain([0, d3.max(dataset)])
    .range([svgHeight - padding, padding]);

var svg = d3.select("body")
    .append("svg")
    .attr("width", svgWidth)
    .attr("height", svgHeight)
    .style('border', '1px solid #999999')


var barWidth = xScale.bandwidth();
var bars = svg.selectAll(".bar")
    .data(dataset)
    .enter()
    .append("rect")
    .attr("class", "bar")
    .attr("fill", "#69b3a2")
    .attr("x", function (d, i) {
        return xScale(i);
    })
    .attr("y", function (d) {
        return yScale(d);
    })
    .attr("width", barWidth)
    .attr("height", function (d) {
        return svgHeight - yScale(d) - padding;
    });


var xAxis = d3.axisBottom(xScale);
var yAxis = d3.axisLeft(yScale);

svg.append("g")
    .attr("class", "x-axis")
    .attr("transform", "translate(0," + (svgHeight - padding) + ")")
    .call(xAxis);

svg.append("g")
    .attr("class", "y-axis")
    .attr("transform", "translate(" + padding + ",0)")
    .call(yAxis);

总结

绘制基础柱状图的教程如上所述。D3.js是一个强大的数据可视化工具，学会使用它可以帮助开发者在Web应用中创建丰富多彩的图表。如果你对D3.js还不够熟悉，可以参考更多相关资料和文档来进一步提升自己的技能水平。

在线地址：https://scqilin.github.io/d3js/basic-chart/index.html

代码数据集和文章有一点差别哦。