数据可视化之 Sankey 桑基图的实现

原文地址： https://geekplux.com/2018/08/28/how-to-implement-sankey-diagram.html

什么是桑基图

Google 搜索桑基图，可以搜到一大堆定义。简而言之，桑基图是一种数据流图，展示了数据是如何从左到右流向最后的节点，每条边代表一条数据流，宽度代表数据流的大小。桑基图常用于流量分析，可以很清楚的看出数据是如何渐渐分流的。本文着重讲解如何实现，理论方面的东西各位可以自行了解。

实现桑基图的关键点

关键点有两个：

1. 坐标计算

桑基图要展现的数据流，算是图（拓扑类、网络型或关系型）数据的一种。实现一个数据可视化图，最重要的就是拆解元素。而实现一个图数据可视化，则最重要的是分清“节点”和“边”。

拆解元素之后，最重要的便是坐标的计算，这里包括点和边的坐标。而图形中，任何的元素都可以看作是点连线而成，所以元素坐标的计算实际上就成了点坐标的计算。比如桑基图中，节点是一个矩形，那么只需计算两个点（左上和右下）的坐标(x0, y0),(x1, y1)便可确定；边是一个带形，需要计算四个端点才能确定，带形的弧度则可由简单的三次贝塞尔曲线计算得来。

由此观之，实现桑基图的核心在于计算出以上的这些点坐标。其实实现任意一种可视化都是计算点的坐标。

2. 减少边交叉

当数据量到一定程度的时候， 桑基图中的边会出现重叠现象，造成一定的视觉混乱。如何减少可以阅读本文第二节。

一、坐标计算的实现

准备工作

设计数据结构

经典的图数据结构一般是邻接矩阵和邻接表，我们也可以自己设计。我在做拓扑数据可视化的时候，会先和后端