Loading...
The mindmap tree layout is suitable for hierarchical layouts of tree structures, supporting expansion on both left and right sides. Nodes at the same depth will be placed on the same layer. Note: the layout does take node size into account. See more mindmap layout examples or source code.
const graph = new Graph({layout: {type: 'mindmap',direction: 'H',preLayout: false,getHeight: () => 32,getWidth: () => 32,getVGap: () => 16,getHGap: () => 72,},});
Property | Description | Type | Default | Required |
---|---|---|---|---|
type | Layout type | mindmap | - | ✓ |
direction | Layout direction, options | H | LR | RL | TB | BT | LR | |
getHeight | Function to calculate the height of each node | (d?: Node) => number | ✓ | |
getWidth | Function to calculate the width of each node | (d?: Node) => number | ✓ | |
getVGap | Vertical gap for each node. Note: the actual vertical gap between two nodes is twice the vgap | (d?: Node) => number | ||
getHGap | Horizontal gap for each node. Note: the actual horizontal gap between two nodes is twice the hgap | (d?: Node) => number | ||
getSide | Set whether the node is placed on the left or right of the root. Only effective when direction is H | (d?: Node) => string |
H
|LR
|RL
|TB
|BT
Default:'LR'
Tree layout direction
'H'
: horizontal — The children of the root node are divided into two parts and placed on the left and right sides of the root node. You can pass the getSide
method to specify the left/right distribution logic for each node. If not provided, the first half will be placed on the right, and the second half on the left by default.'LR' | 'TB'
: Children are placed on the right side of the root node.'RL'
: Children are placed on the left side of the root node.BT
: Children are placed on the right side of the root node, then the entire graph is rotated 180° along the X axis.(d?: Node) => number
Width of each node
Example:
(d) => {// d is a nodeif (d.id === 'testId') return 50;return 100;};
(d?: Node) => number
Height of each node
Example:
(d) => {// d is a nodeif (d.id === 'testId') return 50;return 100;};
(d?: Node) => number
Horizontal gap for each node
Example:
(d) => {// d is a nodeif (d.id === 'testId') return 50;return 100;};
(d?: Node) => number
Vertical gap for each node
Example:
(d) => {// d is a nodeif (d.id === 'testId') return 50;return 100;};
(d?: Node) => string
Set whether the node is placed on the left or right of the root. Note: only effective when direction
is H
. If not set, the first half of the children will be placed on the right, and the second half on the left by default. See getSide auto calculation logic.
Example:
(d) => {// d is a nodeif (d.id === 'test-child-id') return 'right';return 'left';};
direction='H'
is suitable for rendering upstream and downstream lineage of a specified node, with upstream on the left and downstream on the right of the central node.