D3 二维图表的绘制系列（二十）河流图

上一篇：封闭图 https://blog.youkuaiyun.com/zjw_python/article/details/98591118

下一篇：仪表盘图 https://blog.youkuaiyun.com/zjw_python/article/details/98596174

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

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

1 图表效果

在这里插入图片描述

2 数据

date,food,transportation,education,house,clothes
2019-06-01,30,40,50,56,30
2019-06-02,20,80,56,42,60
2019-06-03,20,50,80,57,54
2019-06-04,10,30,40,36,62
2019-06-05,15,20,35,50,43
2019-06-06,10,30,70,73,34
2019-06-07,20,56,60,37,20
2019-06-08,15,20,65,46,25
2019-06-09,40,34,43,64,45
2019-06-10,36,46,60,75,62
2019-06-11,25,32,40,60,38
2019-06-12,10,18,32,34,55
2019-06-13,34,23,42,43,32
2019-06-14,30,46,25,25,23
2019-06-15,22,62,52,20,26
2019-06-16,17,45,42,10,21
2019-06-17,13,50,72,21,30
2019-06-18,10,34,65,34,20
2019-06-19,25,34,56,44,15
2019-06-21,15,14,32,56,32
2019-06-22,30,32,42,24,42
2019-06-23,20,25,23,32,23
2019-06-24,5,14,52,42,10
2019-06-25,18,36,25,36,12
2019-06-26,34,40,30,20,22
2019-06-27,12,32,34,54,34
2019-06-28,10,50,24,68,20
2019-06-29,26,55,32,35,36
2019-06-30,21,40,20,53,30

3 关键代码

导入数据

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

一些样式参数配置

 const config = {
   
   
        margins: {
   
   top: 80, left: 80, bottom: 50, right: 80},
        textColor: 'black',
        gridColor: 'gray',
        title: '基础河流图',
        animateDuration: 1000
    }

尺度转换，河流图的样子与堆叠面积图有几分类似，两者都运用d3.stack进行布局，区别在于，河流图堆叠的基准线不再是X轴。虽然布局算法不同，但我们只需要稍微更改一下配置选项即可，非常简单

/* ----------------------------尺度转换------------------------  */
    chart.scaleX = d3.scaleTime()
                    .domain([new Date(data[0].date), new Date(data[data.length-1].date)])
                    .range([0, chart.getBodyWidth()]);

    chart.scaleY = d3.scaleLinear()
                    .domain([0, (Math.floor((
                        d3.max(data, (d) => d.house) +
                        d3.max(data, (d) => d.food) +
                        d3.max(data, (d) => d.education) +
                        d3.max(data, (d) => d.transportation) +
                        d3.max(data, (d) => d.clothes)
                        )/10) + 1)*10])
                    .range([chart.getBodyHeight(), 0])

    chart.stack = d3.stack()
                    .keys(['house'