2.8 KiB
| title | order |
|---|---|
| Grid | 9 |
Grid orders the nodes according to the configurations and arranged them onto grid.
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