force-graph 力导向图属性总结
力导向图
- 基础容器
1 | <div id="graph"></div> |
基础节点数据
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94const gData = {
"nodes": [
{
"id": "mysql",
"group": 1
},
{
"id": "redis",
"group": 1
},
{
"id": "hive",
"group": 2
},
{
"id": "impala",
"group": 2
}, {
"id": "hdfs",
"group": 3
}, {
"id": "张三",
"group": 3
}, {
"id": "李四",
"group": 4
}, {
"id": "王五",
"group": 4
}, {
"id": "赵六",
"group": 5
}, {
"id": "田七",
"group": 5
}, {
"id": "nccp",
"group": 6
}, {
"id": "kafka",
"group": 6
}
],
"links": [
{
"source": "mysql",
"target": "张三",
"value": "持股"
},
{
"source": "redis",
"target": "kafka",
"value": "归属于"
},
{
"source": "张三",
"target": "kafka",
"value": "来源于"
},
{
"source": "hive",
"target": "nccp",
"value": "拥有"
}, {
"source": "impala",
"target": "nccp",
"value": "导出到"
}, {
"source": "李四",
"target": "hive",
"value": "管理"
}, {
"source": "王五",
"target": "redis",
"value": "负责"
}, {
"source": "赵六",
"target": "李四",
"value": "管理"
}, {
"source": "田七",
"target": "impala",
"value": "负责"
}, {
"source": "kafka",
"target": "李四",
"value": "被管理"
}, {
"source": "田七",
"target": "hdfs",
"value": "负责配置"
}
]
};创建 基础的力导向图
1
const Graph = ForceGraph()(document.getElementById('graph')).graphData(gData);
节点之间添加小球滚动特效
1
2
3const Graph = ForceGraph()(document.getElementById('graph'))
.graphData(gData)
.linkDirectionalParticles(1) // .linkDirectionalParticles(int num) num为小球个数
显示节点标签
1
2
3const Graph = ForceGraph()(document.getElementById('graph'))
.graphData(data)
.nodeLabel('id'); // id为节点的属性
显示节点间关系标签
1
.linkLabel([str or fn]) //显示关系标签
自动填充节点颜色
（为了节省篇幅，以下省略 const Graph = ForceGraph()(document.getElementById(‘graph’)) 部分代码，直接以属性方式添加）
1
.nodeAutoColorBy('group') //根据节点属性自动填充不同的颜色
节点之间添加粒子滚动特效的粒子的颗粒直径（滚动粒子的节点直径）
1
.linkDirectionalParticleWidth(140) // 数字越大直径越大
弯曲节点之间的线条 .linkCurvature()
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23const gData = {
nodes: [...Array(9).keys()].map(i => ({ id: i })),
links: [
{ source: 1, target: 4, curvature: 10 },
{ source: 1, target: 4, curvature: 0.5 },
{ source: 1, target: 4, curvature: -0.5 },
{ source: 5, target: 2, curvature: 0.3 },
{ source: 2, target: 5, curvature: 0.3 },
{ source: 0, target: 3, curvature: 0 },
{ source: 3, target: 3, curvature: 0.5 },
{ source: 0, target: 4, curvature: 0.2 },
{ source: 4, target: 5, curvature: 0.5 },
{ source: 5, target: 6, curvature: 0.7 },
{ source: 6, target: 7, curvature: 1 },
{ source: 7, target: 8, curvature: 2 },
{ source: 8, target: 0, curvature: 0.5 }
]
};
const Graph = ForceGraph()
(document.getElementById('graph'))
.linkDirectionalParticles(2)
.linkCurvature('curvature') // 按照 curvature 对节点之间线条进行弯
.graphData(gData);
节点之间连线添加方向箭头 ->
1
.linkDirectionalArrowLength(6) 数字越大箭头越大
力导向图-事件
鼠标移动到节点上面时
1
2
3.onNodeHover
当鼠标移动到节点上面时候，将鼠标指针变成小手
.onNodeHover(node => elem.style.cursor = node ? 'pointer' : null)点击节点时候触发
1
2
3
4
5
6点击节点时候，将节点位置变为屏幕中央
.onNodeClick(node => { // Center/zoom on node
Graph.centerAt(node.x, node.y, 1000);
Graph.zoom(8, 2000);
});
