D3实现多对多关联关系弧线图
多对多关联关系
基于D3实现的多对多关联关系:github地址
各人员之间的互动关系、各公司上下游企业的关联关系、各地之间的交互关系等等,都是多对多关联关系的表达,他们之间可以通过矩阵图的形式来表达, 如下图所示 (用python的heatmap:
而利用 D3库函数可以实现更为酷炫的弧线,如下图所示:
- 要画多方关系图,首先需要确定绘制的数据,是一个 N * N 的矩阵。
1 | matrix = [ |
- 然后对 i 行 j 列对应的数据设计一个对象字典检索其对应的名字:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24const nameByIndex = {
0: 332,
1: 229,
2: 333,
3: 343,
4: 313,
5: 357,
6: 344,
7: 318,
8: 312,
9: 329
};
const indexByName = {
332: 0,
229: 1,
333: 2,
343: 3,
313: 4,
357: 5,
344: 6,
318: 7,
312: 8,
329: 9
};- 定义好 svg 图片的长和宽。
- 利用D3绘制svg,核心代码如下:
1 | if (!this.d3 || !this.config || !this.matrix || !this.nameByIndex || !this.indexByName) { |
html代码如下:
1 |
|
其中 d3 是 D3 库函数依赖,可以使用离线包或者在线引用的方式。
ChordDependencyChart是我自定义的一个库函数,可以实现多对多关联关系弧线图绘制,并可以保存为 png 图片,效果如下:
本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 孙云增的博客!
评论