forceGraph

力导布局图是一种用来呈现复杂关系网络的图表。在力导布局图中，系统中的每个节点都可以看成是一个放电粒子，粒子间存在某种斥力。同时，这些粒子间被它们之间的“边”所牵连，从而产生引力。

开始使用

forceGraph

import { Chart } from '@antv/g2';
import { schemeTableau10 } from 'd3-scale-chromatic';

const chart = new Chart({
  container: 'container',
});

chart.options({
  type: 'forceGraph',
  data: {
    type: 'fetch',
    value: 'https://assets.antv.antgroup.com/g2/miserable.json',
  },
  scale: { color: { range: schemeTableau10 } },
});

chart.render();

选项

属性	描述	类型	默认值
data	数据源配置，见下方说明	Data	-
layout	布局配置	`ForceTransform`	-
style	配置图形样式和标签样式	-	-
nodeLabels	自定义节点数据标签的配置	label[]	[]
linkLabels	自定义连接线数据标签的配置	label[]	[]

data

使用本地网络对象时，将节点数组 nodes 和边数组 links 放入 data.value，通过 type: 'inline' 声明数据源。下面的边通过 source、target 引用节点的 id：

import { Chart } from '@antv/g2';

const graphData = {
  nodes: [{ id: 'A' }, { id: 'B' }],
  links: [{ source: 'A', target: 'B' }],
};

const chart = new Chart({ container: 'container' });
chart.options({
  type: 'forceGraph',
  data: { type: 'inline', value: graphData },
});
chart.render();

把远程 fetch 示例替换为已加载的业务对象时，也使用 data: { type: 'inline', value: graphData }。不要直接写成 data: graphData：data 的对象形式会被解释为连接器配置，缺少 value 可能导致空白图。

远程 JSON 也可返回同样的 { nodes, links } 结构，由 fetch 连接器读取。数据源的完整配置与转换规则见 inline 和 fetch。

layout

属性	描述	类型	默认值
joint	离散力布局或引力布局	boolean	true
nodeStrength	节点引力	`number \| (d => number)`	-
linkStrength	连接线间引力	`number \| (d => number)`	-

style

复合图形标记需要通过不同的前缀来区分图形的配置。

<label>: 数据标签的前缀，例如：labelText 设置标签的 text 文本。
<node>: 节点配置的前缀，例如：nodeFill 设置节点的填充颜色。
<link>: 连接线配置的前缀，例如：linkStrokeWidth 设置连接线的宽度。