D3 二维图表的绘制系列（四）堆叠柱状图

最新推荐文章于 2023-05-28 10:53:53 发布

PAT-python-zjw

最新推荐文章于 2023-05-28 10:53:53 发布

阅读量5.2k

点赞数 2

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

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

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

版权

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

下一篇：横向柱状图 https://blog.csdn.net/zjw_python/article/details/98209333

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

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

1 图表效果

在这里插入图片描述

2 数据

date,food,transportation,education
Mon,30,40,50
Tue,20,80,100
Wed,20,50,80
Thu,10,30,40
Fri,15,20,35
Sat,10,30,70
Sun,20,50,60

3 关键代码

导入数据

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

配置一些样式参数

/* ----------------------------配置参数------------------------  */
const config = {
   
        barPadding: 0.15,
        margins: {
   top: 80, left: 80, bottom: 50, right: 80},
        textColor: 'black',
        gridColor: 'gray',
        tickShowGrid: [60, 120, 180],
        title: '堆叠直方图',
        hoverColor: 'white',
        animateDuration: 1000
    }

尺度转换和布局函数定义，堆叠柱状图使用d3.stack布局，其能自动布局计算，返回各分块上下边界的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.map((d) => d.food + d.transportation + d.education))])
                    .range([chart.getBodyHeight(), 0])
    
    chart.stack = d3.stack()
                    .keys(['food', 'transportation', 'education'])
                    .order(d3.stackOrderAscending)
                    .offset(d3.stackOffsetNone);