forceGraph

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.options({
  type: 'forceGraph',
  data: {
    type: 'fetch',
    value: 'https://assets.antv.antgroup.com/g2/miserable.json',
  },
  scale: { color: { range: schemeTableau10 } },
});

chart.render();

Options

data

For a local network object, put the nodes and links arrays in data.value and declare the connector with type: 'inline'. In this example, each link’s source and target refer to node id values:

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

When replacing a remote fetch example with an already loaded object, also use data: { type: 'inline', value: graphData }. Do not assign data: graphData directly: an object assigned to data is interpreted as connector configuration, and omitting value can produce a blank chart.

Remote JSON can return the same { nodes, links } structure through the fetch connector. See inline and fetch for data source configuration and transforms.

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.