Displays a series of nodes (such as entities, objects, or concepts) and their connections or relationships.

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

When to Use

Use when you need to visualize nodes and their relationships in a complex network structure, revealing connection patterns and data flow intuitively.

Examples

API

For general graph properties, refer to: General Graph Properties

NetworkGraph

Data

Graph data. If the expand-collapse behavior is enabled, make sure the children field is included in the data.

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

Layout

D3 Force layout. Common parameters are as follows:

collide: Force to prevent node overlap.

link: Used to simulate the connection relationship between nodes, ensuring that the connected nodes remain within a certain distance range.

manyBody: The gravitational or repulsive force between nodes.

For complete parameters, refer to d3-force