Grid

2 min read

Grid orders the nodes according to the configurations and arranged them onto grid.

img
const graph = new G6.Graph({
  container: 'mountNode',
  width: 1000,
  height: 600,
  layout: {
    type: 'grid',
    begin: [0, 0],
    preventOverlap: true, // nodeSize or size in data is required for preventOverlap: true
    preventOverlapPdding: 20,
    nodeSize: 30,
    condense: false,
    rows: 5,
    cols: 5,
    sortBy: 'degree',
  },
});

layoutCfg.begin

Type: Array
Example: [ 0, 0 ]
Default: [ 0, 0 ]
Required: false
Description: The place where the grid begin (left top)

layoutCfg.preventOverlap

Type: Boolean
Default: false
Required: false
Description: Whether to prevent node overlappings. To activate preventing node overlappings, nodeSize is required, which is used for collide detection. The size in the node data will take effect if nodeSize is not assigned. If the size in node data does not exist either, nodeSize is assigned to 30 by default

layoutCfg.nodeSize

Type: Number
Default: 30
Required: false
Description: The diameter of the node. It is used for preventing node overlappings

layoutCfg.preventOverlapPadding

Type: Number
Default: 10
Required: false
Description: The minimum padding between nodes to prevent node overlappings. Takes effect when preventOverlap is true

layoutCfg.condense

Type: Boolean
Default: false
Required: false
Description: Wheter to utilize the minimum space of the canvas. false means utilizing the full space, true means utilizing the minimum space.

layoutCfg.rows

Type: Number
Default: undefined
Required: false
Description: The row number of the grid. If rows is undefined, the algorithm will calculate it according to the space and node numbers automatically

layoutCfg.cols

Type: Number
Default: undefined
Required: false
Description: The column number of the grid. If cols is undefined, the algorithm will calculate it according to the space and node numbers automatically

layoutCfg.sortBy

Type: String
Default: undefined
Required: false
Description: The ordering method for nodes. Smaller the index in the ordered array, more center the node will be placed. If sortBy is undefined, the algorithm order the nodes according to their degrees

layoutCfg.workerEnabled

Type: Boolean
Default: false
Required: false
Description: Whether to enable the web-worker in case layout calculation takes too long to block page interaction