Layout Overview

Overview

Graph layout refers to the process of arranging elements in a graph according to certain rules, such as force-directed layout based on charge elasticity models, grid layout with sequential arrangement, and tree layout based on hierarchical structures.

Layout Types

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

• AntVDagreLayout: Custom layout based on dagre
• CircularLayout: Circular layout
• ComboCombinedLayout: Layout suitable for combinations
• ConcentricLayout: Concentric layout
• D3Force3DLayout: 3D Force-directed layout
• D3ForceLayout: Force-directed layout based on D3
• DagreLayout: dagre layout
• FishboneLayout: Fishbone layout
• ForceAtlas2Layout: ForceAtlas2 layout
• ForceLayout: Force-directed layout
• FruchtermanLayout: Fruchterman layout
• GridLayout: Grid layout
• MDSLayout: High-dimensional data dimensionality reduction layout
• RadialLayout: Radial layout
• RandomLayout: Random layout
• SnakeLayout: Snake layout
• CompactBoxLayout: Compact tree layout
• DendrogramLayout: Dendrogram layout
• MindmapLayout: Mindmap layout
• IndentedLayout: Indented tree layout

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

Register Layout

You can directly use 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

The layout configuration item can specify the graph’s layout algorithm, for example:

{
  layout: {
    // Specify the layout algorithm to use
    type: 'force',
    // Configuration items for the layout algorithm
    gravity: 10
    // ...
  }
}

You can also use graph.setLayout to update the layout configuration after the graph is instantiated.

Starting from 5.1, layout docs align their shared fields with @antv/layout. Besides each layout’s own algorithm parameters, you should also pay attention to common options such as width, height, center, enableWorker, node, and edge.

Layout Acceleration

G6 provides accelerated versions for some layout algorithms, including executing layout algorithms in Web Workers, providing WASM versions of layout algorithms, and GPU-accelerated layout algorithms. They can be used as follows:

Execute Layout Algorithms in Web Workers

Except for tree layouts, all built-in layout algorithms in G6 support execution in Web Workers. Simply set enableWorker to true:

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

Use WASM Version Layout Algorithms

Currently supported WASM version layout algorithms include: 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 threads:

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

Initialize the graph and pass in the layout configuration:

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

Use GPU-Accelerated Layout

Currently supported GPU-accelerated layout algorithms include: Fruchterman Layout, 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 the 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 layout algorithm
• setLayout: Set layout algorithm
• stopLayout: Stop layout algorithm

Custom Layout

If the built-in layout algorithms cannot meet your needs, you can customize layout algorithms. For details, please refer to Custom Layout.

If you are migrating layout configuration from G6 5.0 to 5.1, see Upgrade from 5.0 to 5.1 (Layout).