Force layout

Overview

Attraction pulls linked nodes together and repulsion keeps nodes apart.

When to use it

Use it to explore connections in social or service dependency networks.

Basic usage

Set the layout type with layout.type.

const graph = new Graph({
  container,
  data,
  layout: { type: 'force' },
});

Options

Option	Description	Type	Default
`linkDistance`	Target distance between linked nodes.	`number`	`200`
`nodeStrength`	Repulsion strength between nodes.	`number`	`1000`
`edgeStrength`	Attraction strength along an edge.	`number`	`50`
`maxIteration`	Maximum number of iterations.	`number`	Depends on node count

Common layout options · Layout reference

Code example

The example sets the target distance between connected nodes to 100.

Loading example…

Drag to pan or scroll to zoom.

const layout = { type: 'force', linkDistance: 100 };

import { Graph, register, type GraphOptions, type LayoutConfig } from '@antv/g6-lite';

type ExampleOptions = Pick<GraphOptions, 'data' | 'node' | 'edge'>;

function network(type: string): ExampleOptions {
  const links = [
    [0, 1], [0, 2], [0, 3], [1, 2], [1, 4], [1, 5],
    [2, 5], [2, 6], [3, 7], [3, 8], [3, 9],
    [7, 8], [8, 9], [4, 10], [4, 11], [10, 11],
  ];
  return {
    data: {
      nodes: Array.from({ length: 12 }, (_, index) => ({ id: String(index) })),
      edges: links.map(([source, target]) => ({ source: String(source), target: String(target) })),
    },
    node: {
      style: {
        size: 24,
        label: (node) => node.id,
        labelColor: '#fff',
        labelPlacement: 'center',
        fill: (node) => type === 'radial' && node.id === '0' ? '#6d28d9' : '#1677ff',
      },
    },
    edge: { style: { lineWidth: 2 } },
  };
}

async function render(container: HTMLElement, layout: LayoutConfig, options: ExampleOptions) {
  const graph = new Graph({
    container,
    ...options,
    layout,
    behaviors: ['drag-canvas', 'zoom-canvas'],
    autoFit: { padding: 36, maxZoom: 1 },
  });
  try {
    await graph.render();
    return graph;
  } catch (error) {
    graph.destroy();
    throw error;
  }
}

export function run(container: HTMLElement) {
  const layout: LayoutConfig = { type: 'force', linkDistance: 100 };
  return render(container, layout, network(layout.type));
}

Compare network layouts