用D3.js进行医疗数据可视化 （四） 堆积区图 (Stacked Area Chart)

介绍

在之前的文章《用D3.js进行医疗数据可视化 （一）折线图》中，我们可以看到对于所可视化的医疗卫生机构诊疗人次数线图，最下部的几条线几乎重合在一起，而且几种机构类型相互包含，关系比较混乱。因此在这篇文章中，我们尝试一下用堆积区图（stackedarea chart）来强调它们之间的对比。

 

代码

 

可视化效果

 

图1 每种医疗机构每月总诊疗人次数（万人次）

图2 每种医疗机构每月院均诊疗人次数（人次）

讨论

先看图1。直观来看，堆积区图比起折线图，能更好地反映机构之间诊疗人次数的对比。可以从图中看到，基层医疗卫生机构、三级医院和二级医院，占了诊疗数的大头。而一级医院和未定级医院相比而言，诊疗数很少。而二级医院和三级医院相比，差距不明显。除了这些结论，我也比较好奇如果平均到每所机构，其诊疗数的差异是否还是这样。比如在这张图上，二级和三级医院的诊疗数差异不明显，但如果分别考虑这两种医院的数量，也许就会有不同的结论。图2就是对Y轴代表的含义进行了调整，通过用每种医疗机构每月总诊疗人次数除以当月每种机构总数得到了院均诊疗人次数。从图上看到，原本诊疗数量很大的基层机构平均到每个机构，每月只有区区几十的数量，在图中几乎看不出来。而三级医院一平均到每院，立马就占了诊疗数的大头。

下面是一些技术上面的讨论。

1 改变Y轴的domain

在之前的折线图中，我们设置Y轴的domain是从value的最小值到最大值。而堆积区图需要显示的是从0到几个机构每个纵向的value堆积起来的最大值。参考maxValue的计算。对X轴domain的计算也用了一种新的方法。

2 调整数据

对于原始的JSON文件，考虑到堆积区图会自动累积每种机构的value，因此我们把JSON中是由别的机构value合计出来的机构类型都去掉了，并按照有意义的顺序排列了机构。

3 产生堆积区域

由于d3.layout.stack()的特殊要求，我们对_data进行了变换，把相应的属性名字变成了x和y。再用d3.svg.area()渲染区块。而区块之间的折线位置也根据堆积的特性进行了调整。

4 去掉点和网格

为了图的简洁起见，这儿去掉了折线图中的点和网格。这个也是见仁见智吧。

5 调整右侧图例

通过调整右侧图例text节点的text-anchor和纵向位置，我们把图例放到了区域内部。从目前的效果来看，除非让整个图的高度变大，不然这种图例还是会出现重叠的可能。而放在下方的图例则可以不改变实现方法。

参考文献

1.    StackedArea Chart. https://github.com/NickQiZhu/d3-cookbook/blob/master/src/chapter9/stacked-area-chart.html