NetworkGraph 网络图

展示一系列节点（如实体、对象或概念）以及它们之间的连接或关系。

import { NetworkGraph } from '@ant-design/graphs';

何时使用

当需要展示复杂网络结构中的节点及其相互关系时，直观地揭示连接模式和数据流动。

代码演示

基本用法

简单的展示。

节点标签

展示节点标签，默认显示三行文字，鼠标悬浮时显示全部内容。

节点重要性

根据节点重要性映射到节点大小，点击此处查看更多配置项

API

通用配置参考：图通用属性

NetworkGraph

属性	说明	类型	默认值
data	数据	Data	-
layout	D3 Force 布局配置	Layout	-

Data

图数据。若开启“展开-收起”交互，需确保数据中包含 children 字段。

const graphData = {
  nodes: [
    { id: '1', label: 'Node 1', children: ['2', '3'] },
    { id: '2', label: 'Node 2', children: ['4'] },
    { id: '3', label: 'Node 3' },
    { id: '4', label: 'Node 4' },
  ],
  edges: [
    { source: '1', target: '2' },
    { source: '1', target: '3' },
    { source: '2', target: '4' },
  ],
};

Layout

D3 Force 布局。常用参数如下：

collide 碰撞力： 防止节点重叠的力。

属性	说明	类型	默认值
collide.radius	节点的碰撞半径	number	-
collide.strength	碰撞力的强度	number	-

link 链接力： 用于模拟节点之间的连接关系，确保连接的节点保持在一定的距离范围内。

属性	说明	类型	默认值
link.distance	两个节点之间的理想距离	number	-
link.strength	链接力的强度，控制节点之间的连接紧密程度	number	-

manyBody 多体力： 节点之间的引力或斥力。

属性	说明	类型	默认值
manyBody.strength	节点之间的引力或斥力的强度	number	-
manyBody.theta	用于计算多体力的 Barnes-Hut 近似参数	number	-

完整参数见 d3-force。