数据可视化之 Sankey 桑基图的完成

2019年8月20日 826次阅读来源: GeekPlux

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

什么是桑基图

《数据可视化之 Sankey 桑基图的完成》

Google 搜刮桑基图，能够搜到一大堆定义。简而言之，桑基图是一种数据流图，展示了数据是怎样从左到右流向末了的节点，每条边代表一条数据流，宽度代表数据流的大小。桑基图常用于流量剖析，能够很清晰的看出数据是怎样逐渐分流的。本文偏重解说怎样完成，理论方面的东西列位能够自行相识。

完成桑基图的症结点

症结点有两个：

1. 坐标盘算

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

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

由此观之，完成桑基图的中心在于盘算出以上的这些点坐标。实在完成恣意一种可视化都是盘算点的坐标。

2. 削减边交织

当数据量到肯定程度的时刻，桑基图中的边会涌现堆叠征象，形成肯定的视觉杂沓。怎样削减能够浏览本文第二节。

一、坐标盘算的完成

准备工作

设想数据结构

典范的图数据结构平常是毗邻矩阵和毗邻表，我们也能够本身设想。我在做拓扑数据可视化的时刻，会先和后端或数据同砚商定好我须要拿到的数据结构，一般是这个模样：

{
    nodes: [
        { foo: bar },
        { foo: baz },
        ...
    ],
    links: [
        { source: 0, target: 1, value: 100 },
        { source: 1, target: 2, value: 10 },
        ...
    ]
}

而我拿到今后要做的第一步就是先把 nodes 和 links 串连起来，这里每一个 link 的 source 和 target 离别是 nodes 的下标，固然你也能够设置其他的援用（指针），总之经由过程援用讲二者串连起来，变成：

{
    nodes: [
        {
            foo: bar,
            column: 0, // 节点地点第几列
            row: 0, // 节点地点第几行
            value: 100, // 节点数据流大小
            sourceLinks: [
                {
                    source: 0,
                    target: 1,
                    ...
                }
            ],
            targetLinks: [
                ...
            ]
        },
        ...
    ],
    links: [
        {
            source: 0,
            target: 1,
            value: 100,
            sourceNode: {
                foo: bar,
                column: 0,
                row: 0,
                ...
            },
            targetNode: {
                ...
            }
        },
        ...
    ]
}

如许，关于某个节点来讲，能够直接用 O(1) 的时候庞杂度访问到它的恣意相邻节点。

盘算节点数据流大小

这里的盘算要领可本身定，一般是取该节点入边和出边的数据流大小之和的最小值。

盘算节点地点行列

在桑基图的盘算中，我们还须要举行一个症结的盘算——盘算节点在桑基图中的第几行第几列。

第几列的盘算，即为节点在图中的深度盘算：

入度为 0 的节点深度为 0，在第一列
出度为 0 的节点深度最大，在末了一列
其他节点的深度为他相连源节点的最大深度加 1

第几行的盘算，涉及到排序的题目，一般某一列中的节点都是按节点数据流大小，从大到小排序。

节点坐标盘算

适才我们说过，坐标盘算能够分为两部份：节点和边。个中，边的坐标位置依赖于节点的坐标，所以应当先盘算节点坐标。

但在盘算坐标之前，起首要明白一个题目：是不是限制视图的宽高。这个题目引伸出两种节点坐标的盘算体式格局。

不限制视图宽高

假如不限制宽高，那末节点坐标的盘算步骤很简朴：

设置一个节点的宽度
设置节点的程度间距
从左至右，依据适才盘算出的节点地点第几列，盘算出节点的横坐标（x0, x1)，初始的 x0 为 0
设定一个比例尺函数（多大的数据流对应屏幕上的若干像素，一般是起首设定一个节点最小高度和一个节点最大高度，然后找出一切节点数据流的最小和最大值，映射成一个定义域为节点数据流大小，值域为节点高度的函数）
经由过程比例尺盘算出节点高度
设置一个节点垂直间距
从上至下，依据适才盘算出的节点地点第几行，盘算出节点的纵坐标 (y0, y1)，初始的 y0 为 0

大抵是这个思绪，横坐标的盘算取决于两个值，节点宽度和 节点程度间距；纵坐标的盘算取决于 节点的数据流大小 和 节点垂直间距。

详细的盘算代码，可依据你本身的数据结构来调解。

限制视图宽高

假如限制宽高，那末盘算步骤须要换个思绪：

节点的宽度和节点的程度间距须要依据节点的列数和视图宽度来盘算，你能够本身手动调解也能够设想个算法来算
从左只需，依据节点宽度和节点程度间距，盘算出节点横坐标
设定一个比例尺函数，盘算出节点的高度
设置一个节点垂直间距
经由过程高斯－赛德尔迭代（Gauss–Seidel method）盘算出纵坐标（大抵的思绪是，先依据前两步的数值算出一个初始节点坐标，假如整体规划超越视图的下界，则节点高度和节点垂直间距都按比例减少（如 0.95），并同时上移 n 个像素，假如整体规划超越视图上界，则节点高度和垂直间距都按比例减少，并同时下移 n 个像素，直到整体的桑基图规划顺应一开始限制的视图宽高）

这个思绪是 d3-sankey 的完成思绪。假如你有限制视图宽高的需求，那末能够直接运用 d3-sankey。

边的坐标盘算

只需肯定了节点坐标，边的坐标能够依据它源节点和目的节点的坐标来算出：

关于一个节点，将它的出边和入边举行排序（排序要领一般是依据相连节点在第几行从上到下排，也能够经由过程一些其他排序要领削减边的交织，详细在第二节引见）
盘算每一个节点中单元数据流占节点高度的比例
依据出边入边的数据流大小，乘上一步盘算出的比例，则可获得每条边摆布双方的高度
从上到下，盘算每条边的纵坐标
每条边四个端点的横坐标离别对应源节点和目的节点的横坐标

以上操纵能够经由过程遍历每一个 node 的 sourceLinks 和 targetLinks 来盘算。获得边的四个端点今后，就能够算出三次贝塞尔曲线的掌握点了：

《数据可视化之 Sankey 桑基图的完成》

二、怎样削减交织

一般要削减边的交织，能够采纳下面两种要领：

均值排序
sugiyama 算法

均值排序这个名字是我本身起的。。不过这个要领很有用有用。

关于每一个源节点来讲，都有相连的目的节点。这里的“均值”指的是一切相连目的节点地点行数的平均值（一切目的节点的行数相加，除以目的节点个数），这个平均值能够大抵形貌该节点每一个出边的位置。每条出边都有如许一个值，这个值越小，则申明该出边要衔接的目的节点的位置越靠上，反之越靠下。所以可依据这个值，从小到大排出出边在该节点上从上到下的位置。