Force-directed graph is a chart used to display complex relationship networks. In a force-directed graph, each node in the system can be viewed as a charged particle with repulsive forces between them. At the same time, these particles are connected by "edges" between them, creating attractive forces.

Getting Started

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

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

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

chart.render();

Options

layout

style

Composite graphic marks need to be distinguished through different prefixes for graphic configuration.

• <label>: Prefix for data labels, e.g., labelText sets the text content of the label.
• <node>: Prefix for node configuration, e.g., nodeFill sets the fill color of nodes.
• <link>: Prefix for link configuration, e.g., linkStrokeWidth sets the width of links.