• How to implement layout of shapes on the canvas
• What layout methods are built into X6 :::

If you want the shapes on the canvas to be arranged according to certain rules, layout algorithms are essential. We provide many layout algorithms in Layout. Below, we will introduce how to use X6 in conjunction with Layout.

Installation

# npm
$ npm install @antv/layout --save

# yarn
$ yarn add @antv/layout

If you are including it directly via a script tag, you can use either of the following CDNs:

• https://unpkg.com/@antv/layout/dist/layout.min.js
• https://cdn.jsdelivr.net/npm/@antv/layout/dist/layout.min.js

Usage

Here is a simple example of using a grid layout:

import { Graph } from '@antv/x6'
import { GridLayout } from '@antv/layout' // In UMD mode, use const { GridLayout } = window.layout

const graph = new Graph({
  container: document.getElementById('container'),
  width: 600,
  height: 400,
})

const model = {
  nodes: [
    {
      id: 'node1',
    },
    {
      id: 'node2',
    },
  ],
  edges: [
    {
      source: 'node1',
      target: 'node2',
    },
  ],
}

const gridLayout = new GridLayout({
  type: 'grid',
  width: 600,
  height: 400,
  center: [300, 200],
  rows: 4,
  cols: 4,
})

const newModel = gridLayout.layout(model)

graph.fromJSON(newModel)

Layout Process

• Choose a layout type, such as the grid above. If you are unsure which layout to use, you can check the examples here for visual references. You can refer to the corresponding documentation for layout configurations.
• Construct the layout data, which is quite simple:

// The following is the data format required for the layout
{
  nodes: [
    {
      id: 'node1',
      size: {
        width: 30,
        height: 40,
      }
    },
    {
      id: 'node2',
      size: {
        width: 30,
        height: 40,
      }
    }
  ],
  edges: [
    {
      source: 'node1',
      target: 'node2',
    }
  ]
}

• After executing the layout method, the layout algorithm will add x and y properties to the nodes based on the data you provided. Once you have the positions of the nodes, you can move them to the specified locations.

const layoutData = gridLayout.layout(originData)
layoutData.nodes.forEach((node) => {
  node.x -= node.size.width / 2
  node.y -= node.size.height / 2
})

:::warning{title=Note:} The x and y returned by the layout algorithm actually represent the center coordinates of the nodes. In X6, the x and y of the nodes represent the top-left corner coordinates, so after the layout, we need to perform a coordinate transformation. :::

Common Layouts

Grid Layout

The grid layout arranges nodes in a grid based on the specified sorting method.

import { GridLayout } from '@antv/layout'

const gridLayout = new GridLayout({
  type: 'grid',
  width: 600,
  height: 400,
  center: [300, 200],
  rows: 4,
  cols: 4,
})

Supports the following configurations:

Circular Layout

The layout arranges all nodes in a circular ring, allowing you to choose the order of nodes on the ring. You can extend the configuration parameters to create grouped layouts, spiral layouts, etc.

import { CircularLayout } from '@antv/layout'

const circularLayout = new CircularLayout({
  type: 'circular',
  width: 600,
  height: 400,
  center: [300, 200],
  radius: 50,
})

Supports the following configurations:

Dagre

Dagre is a hierarchical layout.

import { DagreLayout } from '@antv/layout'

const dagreLayout = new DagreLayout({
  type: 'dagre',
  rankdir: 'LR',
  align: 'UL',
  ranksep: 30,
  nodesep: 15,
  controlPoints: true,
})

Supports the following configurations: