2.5 KiB
| title | order |
|---|---|
| Indented | 15 |
Indented layout represents the hierarchy by indent between them. Each node will take a row/column. It is appropriate for file directory.
direction
Type: String
Options: 'LR' | 'RL' | 'H'
Default: 'LR'
Required: false
Description: The direction of layout:
- LR —— Root is on the left, layout from the left to the right(left image below)
- RL —— Root is on the right, layout from the right to the left(center image below)
- H —— Root is on the middle, layout in horizontal symmetry(right image below)
(Left)LR. (Center)RL. (Right)H.
indent
Type: Number | Function
Default: 20
Example：
(d) => {
// d is a node
if (d.parent?.id === 'testId') return d.parent.x + 50;
return 100;
};
Required: false
Description: When the type is Number, the colunm separation is a fixed value; When the type is Function, the distance between the node and the root node is the returned value of the function.
getWidth
Type: Number | Function
Example:
(d) => {
// d is a node
if (d.id === 'testId') return 50;
return 100;
};
Required: false
Description: The width of each node. Takes effect only when direction is 'H'
getHeight
Type: Number | Function
Example:
(d) => {
// d is a node
if (d.id === 'testId') return 50;
return 100;
};
Required: false
Description: The height of each node
getSide
Type: Function
Example:
(d) => {
// d is a node
if (d.id === 'testId') return 'left';
return 'right';
};
Required: false
Description: The callback function of node position(left or right of root node). Only affects the nodes which are connected to the root node directly. And the descendant nodes will be placed according to it.
dropCap
Type: Boolean
Required: false
Explanation: Whether place the first child node at the next line. true by default