力导向图

force-graph 力导向图属性总结

力导向图

  1. 基础容器
1
<div id="graph"></div>
  1. 基础节点数据

    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
    94
    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": "负责配置"
    }
    ]
    };
  2. 创建 基础的力导向图

    1
    const Graph = ForceGraph()(document.getElementById('graph')).graphData(gData);

  3. 节点之间添加小球滚动特效

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

  4. 显示节点标签

    1
    2
    3
    const Graph = ForceGraph()(document.getElementById('graph'))
    .graphData(data)
    .nodeLabel('id'); // id为节点的属性

  5. 显示节点间关系标签

    1
    .linkLabel([str or fn]) //显示关系标签
  6. 自动填充节点颜色

    (为了节省篇幅,以下省略 const Graph = ForceGraph()(document.getElementById(‘graph’)) 部分代码,直接以属性方式添加)

    1
    .nodeAutoColorBy('group') //根据节点属性自动填充不同的颜色

  7. 节点之间添加粒子滚动特效的粒子的颗粒直径(滚动粒子的节点直径)

    1
    .linkDirectionalParticleWidth(140) // 数字越大直径越大

  8. 弯曲节点之间的线条 .linkCurvature()

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
      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);

  9. 节点之间连线添加方向箭头 ->

    1
    .linkDirectionalArrowLength(6) 数字越大箭头越大

力导向图-事件

  1. 鼠标移动到节点上面时

    1
    2
    3
    .onNodeHover
    当鼠标移动到节点上面时候,将鼠标指针变成小手
    .onNodeHover(node => elem.style.cursor = node ? 'pointer' : null)
  2. 点击节点时候触发

    1
    2
    3
    4
    5
    6
    点击节点时候,将节点位置变为屏幕中央

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