Skip to content
X6

Grid

View MarkdownResource indexEdit this page

The grid is the smallest unit of rendering/moving nodes. The default grid size is 10px. When rendering nodes, it means aligning to the grid with 10 as the minimum unit, such as a node with a position of { x: 24, y: 38 } will be rendered at { x: 20, y: 40 } on the canvas. When moving nodes, it means the minimum distance of each move is 10px.

Demo

import './index.less'
import { createRoot } from 'react-dom/client'
import React from 'react'
import { Graph } from '@antv/x6'
import { Settings } from './settings.tsx'

export default class Example extends React.Component {
  private container: HTMLDivElement
  private graph: Graph

  componentDidMount() {
    this.graph = new Graph({
      container: this.container,
      grid: {
        visible: true,
      },
      background: {
        color: '#F2F7FA',
      },
      mousewheel: {
        enabled: true,
        minScale: 0.2,
        maxScale: 4,
      },
    })

    const source = this.graph.addNode({
      x: 40,
      y: 40,
      width: 100,
      height: 40,
      label: 'Hello',
      attrs: {
        body: {
          stroke: '#8f8f8f',
          strokeWidth: 1,
          fill: '#fff',
          rx: 6,
          ry: 6,
        },
      },
    })

    const target = this.graph.addNode({
      x: 200,
      y: 180,
      width: 100,
      height: 40,
      label: 'Grid',
      attrs: {
        body: {
          stroke: '#8f8f8f',
          strokeWidth: 1,
          fill: '#fff',
          rx: 6,
          ry: 6,
        },
      },
    })

    this.graph.addEdge({
      source,
      target,
      attrs: {
        line: {
          stroke: '#8f8f8f',
          strokeWidth: 1,
        },
      },
    })

    this.graph.centerContent()
  }

  onGridChanged = (options: any) => {
    this.graph.drawGrid(options)
  }

  onGridSizeChanged = (size: number) => {
    this.graph.setGridSize(size)
  }

  refContainer = (container: HTMLDivElement) => {
    this.container = container
  }

  render() {
    return (
      <div className="grid-app">
        <div className="app-side">
          <Settings
            onChange={this.onGridChanged}
            onGridSizeChange={this.onGridSizeChanged}
          />
        </div>
        <div className="app-content" ref={this.refContainer} />
      </div>
    )
  }
}

const root = createRoot(document.getElementById('container')!)
root.render(<Example />)
window.addEventListener('pagehide', () => root.unmount(), { once: true })

Configuration

size

You can set the grid size when creating the canvas through the following configuration.

const graph = new Graph({
  grid: 10,
})

// Equivalent to
const graph = new Graph({
  grid: {
    size: 10,
  },
})

type

The grid is invisible by default. You can enable grid drawing when creating the canvas through the following configuration.

const graph = new Graph({
  grid: true, // Grid size is 10px and draw the grid
})

// Equivalent to
const graph = new Graph({
  grid: {
    size: 10, // Grid size is 10px
    visible: true, // Draw the grid, default is dot type
  },
})

We have four built-in grid types, which can be specified through the type option, with a default value of dot. You can also configure the grid style through the args option.

dot (default)

Dot grid.

new Graph({
  container: this.container,
  grid: {
    visible: true,
    type: 'dot',
    args: {
      color: '#a0a0a0', // Grid point color
      thickness: 1, // Grid point size
    },
  },
})

fixedDot

Fixed dot grid with a fixed point size. When the canvas zoom ratio is less than 1, the grid point size scales with the canvas zoom ratio. When the canvas zoom ratio is greater than 1, the grid point size is the given thickness value.

new Graph({
  container: this.container,
  grid: {
    visible: true,
    size: 10,
    type: 'fixedDot',
    args: {
      color: '#a0a0a0', // Grid point color
      thickness: 2, // Grid point size
    },
  },
})

graph.scale(10, 10)

mesh

Mesh grid.

new Graph({
  container: this.container,
  grid: {
    visible: true,
    type: 'mesh',
    args: {
      color: '#ddd', // Grid line color
      thickness: 1, // Grid line width
    },
  },
})

doubleMesh

Double mesh grid.

const graph = new Graph({
  grid: {
    size: 10,
    visible: true,
    type: 'doubleMesh',
    args: [
      {
        color: '#eee', // Main grid line color
        thickness: 1, // Main grid line width
      },
      {
        color: '#ddd', // Secondary grid line color
        thickness: 1, // Secondary grid line width
        factor: 4, // Main and secondary grid line interval
      },
    ],
  },
})

Methods

getGridSize()

getGridSize(): number

Get the grid size.

setGridSize()

setGridSize(gridSize: number): this

Set the grid size.

showGrid()

showGrid(): this

Show the grid.

hideGrid()

hideGrid(): this

Hide the grid.

clearGrid()

clearGrid(): this

Clear the grid.

drawGrid(…)

drawGrid(options?: DrawGridOptions): this

Redraw the grid.

Name Type Required Default Description
type string dot Grid type. For details, please refer to here.
args object - Grid parameters corresponding to the grid type.

Custom Grid

Here’s an example of registering a red dot grid:

Graph.registerGrid('red-dot', {
  color: 'red',
  thickness: 1,
  markup: 'rect',
  update(elem, options) {
    const width = options.thickness * options.sx
    const height = options.thickness * options.sy
    Dom.attr(elem, {
      width,
      height,
      rx: width,
      ry: height,
      fill: options.color,
    })
  },
})

const graph = new Graph({
  grid: {
    type: 'red-dot',
  },
})
© Copyright 2026 Ant Group Co., Ltd..备案号：京ICP备15032932号-38
Site search
Documentation and examplesType to start searching

Search documentation, APIs, and examples

↑↓Select↵OpenEscClose