桑基图简介

什么是桑基图？

桑基图是一种流程图，其中“流动”通过宽度不同的箭头来表示，箭头的粗细取决于流量的大小。

它们常用于可视化能量、物料或成本的转移，特别适用于展示系统中不同部分之间流量的比例关系。

最著名的桑基图例子是查尔斯·米纳德（Charles Minard）绘制的1812年拿破仑远征俄国的地图。

D3.js 桑基图的数据格式要求

我们可以将桑基图理解为由“节点”和“链接”组成的结构：

生成这类图表的数据也必须按照节点和链接的形式进行组织。

例如，以下是一个用于构建上述图表的 JSON 文件示例：

1{
2"nodes":[
3{"node":0,"name":"node0"},
4{"node":1,"name":"node1"},
5{"node":2,"name":"node2"},
6{"node":3,"name":"node3"},
7{"node":4,"name":"node4"}
8],
9"links":[
10{"source":0,"target":2,"value":2},
11{"source":1,"target":2,"value":2},
12{"source":1,"target":3,"value":2},
13{"source":0,"target":4,"value":2},
14{"source":2,"target":3,"value":2},
15{"source":2,"target":4,"value":2},
16{"source":3,"target":4,"value":4}
17]}

在上述数据中，我们有 5 个节点（编号为 0 到 4），按顺序编号，并赋予了与列表位置相对应的名称。

这种顺序编号只是为了清晰地展示数据结构。当使用 D3.js 时，系统会自动根据节点在列表中的位置为其分配索引。换句话说，我们可以省略“node”字段，因为 D3 会自行识别每个节点的位置。关键在于——我们必须清楚地知道每个节点的身份，尤其是在手动构建数据时（动态生成数据当然更理想，但我们现在先不考虑这么复杂的情况）。

数据中的“links”部分可以拆分为多个从源节点到目标节点的连接，每个连接都关联一个数值。

source 和 target 的数字指的是节点列表中的索引位置。例如，“source”:1 和 “target”:2 表示这条链接从列表中第 1 个节点出发，指向第 2 个节点。需要注意的是，D3 关注的不是节点的数值本身，而是它在节点列表中的位置（从 0 开始计数）。