Grid
Grid Layout will order the nodes according to the parameters, and then place the nodes on the grids.
Usage
As the demo below, you can deploy it in layout
while instantiating Graph. it can also be used for Subgraph Layout. By tuning the parameters, you can adjust the iteration number, compact degree, layout buy cluster, and so on. By tuning the parameters, you can adjust the ordering method, rows, cols, prevent node overlappings, and so on.
- Example 1 : Basic Grid Layout, the nodes are ordered according to the data.
- Example 2 : Order the nodes according to the property
cluster
.
begin
Type: Array
Example: [ 0, 0 ]
Default: [ 0, 0 ]
Required: false
Description: The place where the grid begin (left top)
preventOverlap
Type: Boolean
Default: false
Required: false
Explanation: Prevent node overlappings. Only when the nodeSize
is assigned, the collide detection will take effect
nodeSize
Type: Number
Default: 30
Required: false
Explanation: The size of the nodes(diameter). For collide detection to prevent node overlappings
preventOverlapPadding
Type: Number
Default: 10
Required: false
Explanation: The min distance between nodes when preventOverlap
is true
condense
Type: Boolean
Default: false
Required: false
Explanation: Uses all available space on false, uses minimal space on true
rows
Type: Number
Default: undefined
Required: false
Explanation: Force num of rows in the grid
cols
Type: Number
Default: undefined
Required: false
Explanation: Force num of columns in the grid
sortBy
Type: String
Default: undefined
Required: false
Explanation: Order the nodes according to this parameter. It is the property's name of node. The node with higher value will be placed to the center. If it is undefined, the algorithm will order the nodes by their degree.