g6/docs/api/graphLayout/guide.en.md

title	order
Outline	0

Built-in Layout Overview

G6 provides several built-in layout algorithms as listed below. They can be configured to layout when instantiate the Graph, or be instantiated independently. If the built-in layouts cannot meet your requirement, you can also custom a layout.

Notice that the layouts for Graph cannot be used on TreeGraph.

• Random Layout: Randomizes the node postions;
• Force Layout: Classical force-directed layout;
• Fruchterman Layout: A kind of force-directed layout;
• Circular Layout: Arranges the nodes on a circle;
• Radial Layout: Arranges the nodes around a focus node radially;
• MDS Layout: Multidemensional Scaling;
• Dagre Layout: Arranges the nodes hierarchically;
• Concentric Layout: Arranges the nodes on concentric circles;
• Grid Layout: Arranges the nodes on grid.
• Combo Force Layout：New feature of V3.5 Designed for graph with combos.

Configure to Gaph

Configure the layout when instantiating a Graph:

const graph = new G6.Graph({
  ...                      // Other configurations
  layout: {                // Object, configuration for layout. random by default
    type: 'force',
    preventOverlap: true,
    nodeSize: 30,
    ...                    // Other layout configurations
  }
});

The configurations of each layout algorithms are different. Please refer to corresponding API of each layout in this directory.
When layout is not assigned on graph:

• If there are x and y in node data, the graph will render with these information;
• If there is no positions information in node data, the graph will arrange nodes with Random Layout by default.

Instantiate Independently

The functions in this section should be concerned in these two situation:

• When you want to applay a layout algorithm to your data but not for Graph, you can instantiate the layout independently by calling const layout = new G6.Layout['layoutName'].
• When you want to custom a new type of layout by G6.registerLayout, some functions you should override.

Initialize

init(data)

Initialize the layout.

Paramter

Name	Type	Required	Description
data	Object	true	The data for the layout

getDefaultCfg()

Get the default configurations of the layout.

Return

Name	Type	Required	Description
cfg	Object	true	The default configurations

Layout

execute()

Execute the layout.

layout(data)

Execute layout according to the data.

Paramter

Name	Type	Required	Description
data	Object	true	The data to be arranged

Update

updateCfg(cfg)

Update the configurations for layout.

Paramter

Name	Type	Required	Description
cfg	Object	true	New configurations

Destroy

destroy()

Destroy the layout.