D3 二维图表的绘制系列（二）基础柱状图

最新推荐文章于 2025-04-16 09:32:05 发布

PAT-python-zjw

最新推荐文章于 2025-04-16 09:32:05 发布

阅读量3.4k

点赞数 1

分类专栏： D3.js 二维图表系列文章标签： D3 柱状图

本文为博主原创文章，转载请务必附上文章网址，谢谢。

本文链接：https://blog.csdn.net/zjw_python/article/details/98201470

版权

下一篇：多列柱状图 https://blog.csdn.net/zjw_python/article/details/98205614

代码结构和初始化画布的Chart对象介绍，请先看 https://blog.csdn.net/zjw_python/article/details/98182540

本图完整的源码地址： https://github.com/zjw666/D3_demo/tree/master/src/barChart/basicBarChart

1 图表效果

在这里插入图片描述

2 数据

date,money
Mon,120
Tue,200
Wed,150
Thu,80
Fri,70
Sat,110
Sun,130

3 关键代码

将数据转化为对象数组

d3.csv('./data.csv', function(d){
   
    return {
   
        date: d.date,
        money: +d.money
    };
}).then(function(data){
   
....

定义一些配置参数（字体、线条颜色、动画时间、图表标题、网格线显示节点等）

/* ----------------------------配置参数------------------------  */
    const chart = new Chart();
    const config = {
   
        barPadding: 0.15,
        barColor: chart._colors(0),
        margins: {
   top: 80, left: 80, bottom: 50, right: 80},
        textColor: 'black',
        gridColor: 'gray',
        tickShowGrid: [60, 120, 180],
        title: '直方图',
        hoverColor: 'white',
        animateDuration: 1000
    }

    chart.margins(config.margins);

定义尺度转换函数，将数据值映射到实际的画布尺度，柱状图有两个轴，X轴是非连续的日期轴，而Y轴是连续的数值轴，在svg坐标系中，Y轴由上至下逐渐增大，与数学的坐标系相反，因此要反转一下

/* ----------------------------尺度转换------------------------  */
    chart.scaleX = d3.scaleBand()
                    .domain(data.map((d) => d.date))
                    .range([0, chart.getBodyWidth()])
                    .padding(config.barPadding);
    
    chart.scaleY = d3.scaleLinear()
                    .domain([0, d3.max(data, (d) => d.money)])
                    .range([chart.getBodyHeight(), 0])

渲染柱形，这里用svg矩形元素渲染，对元素的height属性添加动画

/* ----------------------------渲染柱形------------------------  */
    chart.

最低0.47元/天解锁文章