多层次结构的数据可视化

多层级结构

将大于等于 2 个层结构的数据叫作多层级数据结构。将此类进行数据可视化的时候，我们需要同时考虑如何将这种层级结构和指标同时进行展示。既要让用户看明白它的层次结构同时也要让用户看明白指标间的“对比”。本文介绍几种常见的可视化方法，并在最后给出一些综合的  对比分析。

圆形方案

sunburst 是一种外观呈现圆形的方案。在图中最内层的表示第一级，依次往外。通过面积表示指标。

sunburst 与好像是多个 donut 图的组合，非常巧妙的把层级结构展现出来。但它也有自身的特点，圆形方案占用的留白特别多，造成宝贵的页面空间被浪费。如果是在 dashboard 这样原场景的话，可能会占用比较大的面积，从而影响不能承受其它图表的摆放。

矩形方案

treemap 与 sunburst 有点像的地方是也是使用面积来表示指标的大小。但它使用的布局算法类似使用了尝试优先的方式，将同一 parent 节点的叶子结点聚焦在一起展现。

treemap 的问题是不能最直观的看出一个多层级结构的关系。这个问题有几个方案可以解决：

1. 使用 tooltip 进行展示。如果显示这种关系的需求不是最核心的展示需求的话，可以使用 tooltip 的方式进行展示。
2. cascaded-treemap

sunburst vs treemap

在 dashboard 的项目中，如果是层级非常少，且每个层级的孩子结节不多的情况下，我会考虑使用 sunburst。如果是相反的情况，使用 treemap 的空间利用率会更高一些。

树形方案

树形方案最主要的功能是把层次结构展示出来，在图的本身不太能有效的把指标展示出来。一种方法是在结点的 title 上，除了显示结点名，也可以把结点需要展示的指标显示出来。比如：小张（20 岁)。这里小张是结点名，20 岁是指标代表他的年龄。

另一种方法是配合其它的控件使用。tree 只做层级结构的展示，通过是用来做导航，然后在右侧或其它位置提供一个结节详细信息的展示和操作面板。此方案更适用于有明确的导航需求的场景，用户知道想要找的结点，然后找到并进行操作。并不适合数据探索的场景。

网络形方案

网络图也可以展现层次结构，但可能更常见于展示更广泛意义上的网络结构。它的可视化元素有边和节点。所以通常可以使用节点的直径来表示指标（颜色也可以但不常见）。边更多的表示节点间关系，而不是指标的值。

网络图有一个问题是 title 的展示。如果不展示 title 的时候，更多的是分析宏观性。但展示 title 的时候呢，有可能是针对某个节点的具体分析了。这时，在布局的时候就要考虑尽量减少 title 文字重叠的情况。一是控制 title 的文字长度。另一是调整节点间的最小距离(限于使用 force-directed 布局算法)

cheatsheet

	sunburst	treemap	cascaded treemap	tree	network
层级少数据少	最适合				适合
层级多数据多		最适合	最适合
直观显示层级结构	适合		适合	最适合	适合
空间占用比		最适合	适合	适合