Overview

Graph layout refers to the process of arranging the elements in a graph according to certain rules, such as force-directed layouts based on the electrostatic model, sequential arrangement in grid layouts, and tree layouts based on hierarchical structures, etc.

Layout Type

G6 provides a variety of layout algorithms, allowing users to select the appropriate layout algorithm based on their needs:

• AntVDagreLayout: A layout based on dagre customization
• CircularLayout: Circular layout
• ComboCombinedLayout: A layout suitable for scenarios with combos
• ConcentricLayout: Concentric circle layout
• D3Force3DLayout: A 3D force-directed layout
• D3ForceLayout: A force-directed layout based on D3
• DagreLayout: A layout based on dagre
• FishboneLayout: Fishbone layout
• ForceAtlas2Layout: A layout based on ForceAtlas2
• ForceLayout: Force-directed layout
• FruchtermanLayout: A layout based on Fruchterman
• GridLayout: Grid layout
• MDSLayout: A layout algorithm for high-dimensional data dimensionality reduction
• RadialLayout: Radial layout
• RandomLayout: Random layout
• SnakeLayout: Snake layout
• CompactBoxLayout: Compact tree layout
• DendrogramLayout: Dendrogram layout
• MindmapLayout: Mind map layout
• IndentedLayout: Indented tree layout

Among them, CompactBox Layout, Dendrogram Layout, Mindmap Layout, and Indented Layout are types of tree layouts, suitable for graphs with tree-like structures.

Register Layout

You can directly use the built-in layouts, but if you want to use other layouts, you need to register them first:

import { register, ExtensionCategory } from '@antv/g6';
import { CustomLayout } from 'package-name/or/path-to-your-custom-layout';

register(ExtensionCategory.LAYOUT, 'custom-layout', CustomLayout);

Configure Layout

You can specify the graph's layout algorithm through the layout option, for example:

{
  layout: {
    // Specify the layout algorithm to be used
    type: 'force',
    // Layout Algorithm Options
    gravity: 10
    // ...
  }
}

You can also update the layout configuration after instantiating the graph using graph.setLayout.

Layout Acceleration

G6 provides accelerated versions of some layout algorithms, including: executing layout algorithms in a Web Worker, providing WASM versions of layout algorithms, and GPU-accelerated layout algorithms. They can be used in the following ways:

Executing Layout Algorithms in a Web Worker

All built-in layout algorithms in G6, except for tree layouts, support execution in a Web Worker. Simply set enableWorker to true:

{
  layout: {
    type: 'force',
    enableWorker: true,
    // ...
  }
}

Use WASM Version Layout Algorithms

The layout algorithms that currently support WASM versions are: Fruchterman Layout, ForceAtlas Layout, Force Layout, Dagre Layout.

First, install @antv/layout-wasm:

npm install @antv/layout-wasm --save

Import and Register the Layout Algorithm:

import { register, Graph, ExtensionCategory } from '@antv/g6';
import { FruchtermanLayout, initThreads, supportsThreads } from '@antv/layout-wasm';

register(ExtensionCategory.LAYOUT, 'fruchterman-wasm', FruchtermanLayout);

Initialize the Thread:

const supported = await supportsThreads();
const threads = await initThreads(supported);

Initialize the Graph and Pass in Layout Configuration:

const graph = new Graph({
  // ... other configurations
  layout: {
    type: 'fruchterman-wasm',
    threads,
    // ... other configurations
  },
});

Use GPU-Accelerated Layout

The layout algorithms that currently support GPU acceleration are: Fruchterman Layout and GForce Layout.

First, install @antv/layout-gpu:

npm install @antv/layout-gpu --save

Import and Register the Layout Algorithm:

import { register, Graph, ExtensionCategory } from '@antv/g6';
import { FruchtermanLayout } from '@antv/layout-gpu';

register(ExtensionCategory.LAYOUT, 'fruchterman-gpu', FruchtermanLayout);

Initialize the Graph and Pass in Layout Configuration:

const graph = new Graph({
  // ... other configurations
  layout: {
    type: 'fruchterman-gpu',
    // ... other configurations
  },
});

Execute Layout

Usually, after calling graph.render(), G6 will automatically execute the layout algorithm.

If you need to manually execute the layout algorithm, G6 provides the following APIs:

• layout: Execute the layout algorithm
• setLayout: Set the layout algorithm
• stopLayout: Stop the layout algorithm

Custom Layout

If the built-in layout algorithms do not meet your requirements, you can create a custom layout algorithm. For details, please refer to Custom Layout.