关于桑基图

节选一段来自 AntV 上关于 桑基图的定义

桑基图 (Sankey Diagram),是一种特定类型的流图,用于描述一组值到另一组值的流向。上图为1869年,查尔斯米纳德(Charles Minard)绘制的1812年拿破仑征俄图(Map of Napolean's Russian Campaign of 1812),这是一个在地图上覆盖桑基图的流程图。1898年爱尔兰人Matthew Henry Phineas Riall Sankey 在土木工程师学会会报纪要的一篇关于蒸汽机能源效率的文章中首次推出了第一个能量流动图,此后便以其名字命名为 Sankey 图,中文音译为桑基图。

图中延伸的分支的宽度对应数据流量的大小。桑基图的特点如下:

- 起始流量和结束流量相同,所有主支宽度的总和与所有分出去的分支宽度总和相等,保持能量的平衡;
- 在内部,不同的线条代表了不同的流量分流情况,它的宽度成比例地显示此分支占有的流量;
- 节点不同的宽度代表了特定状态下的流量大小。

桑基图的流量含义

桑基图通常的使用场景,是有明确的指向性的。因此也有人尝试用渐变动画、粒子效果等来表现这种流向。

下面展示的这个场景,就是用来表现患者就诊过程中的数量和比例的变化,属于比较常规经典的做法。加入流动效果后,可以更加直观地表现这一含义,选中节点后,它所对应的上下游关系会被高亮,从而能更方便地分析和感知。

实现方案

桑基图的主体是使用 Observable 上的 Flow-o-matic 的例子,它主要用的是 d3.js 中的 sankey 工具。

动态效果使用了在 SVG 内嵌入 ForeignObject 的 canvas 元素,并通过 THREE.js 来渲染 WebGL 的方式,直接制作 SVG 动画性能不佳,而 WebGL 和 SVG 能在这个例子上实现互补,体现了现代浏览器技术的进步。

示例