力导向图

2020-07-09

force-graph 力导向图属性总结

力导向图

基础容器

1	<div id="graph"></div>

基础节点数据

const 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
3

const Graph = ForceGraph()(document.getElementById('graph'))
.graphData(gData)
.linkDirectionalParticles(1) // .linkDirectionalParticles(int num) num为小球个数

显示节点标签

1
2
3

const 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()

  const 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)

点击节点时候触发

点击节点时候，将节点位置变为屏幕中央

.onNodeClick(node => { // Center/zoom on node
                Graph.centerAt(node.x, node.y, 1000);
                Graph.zoom(8, 2000);
            });