3.6 KiB
| title | order |
|---|---|
| CompactBox | 13 |
CompactBox is the default layout for TreeGraph. It will consider the bounding box of each node when layout. It comes from classical Reingold–Tilford tidy layout algorithm.
direction
Type: String
Options: 'LR' | 'RL' | 'TB' | 'BT' | 'H' | 'V'
Default: 'LR'
Required: false
Description: The direction of layout.
- TB —— Root is on the top, layout from the top to the bottom
- BT —— Root is on the bottom, layout from the bottom to the top
- LR —— Root is on the left, layout from the left to the right
- RL —— Root is on the right, layout from the right to the left
- H —— Root is on the middle, layout in horizontal symmetry.
- V —— Root is on the middle, layout in vertical symmetry.
getSide
Type: Function
Example:
(d) => {
// d is a node
if (d.id === 'test-child-id') return 'right';
return 'left';
};
Default: '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
getId
Type: Function
Example:
(d) => {
// d is a node
return d.id + '_node';
};
Required: false
Description: Sets the id for each node
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
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
getHGap
Type: Number | Function
Example:
(d) => {
// d is a node
if (d.id === 'testId') return 50;
return 100;
};
Default: 18
Required: false
Description: The horizontal separation of nodes
getVGap
Type: Number | Function
Example:
(d) => {
// d is a node
if (d.id === 'testId') return 50;
return 100;
};
Default: 18
Required: false
Description: The vertical separation of nodes
radial
Type: Boolean
Default: false
Required: false
Description: If layout the graph in radial style. If radial is true, we recommend to set direction to 'LR' or 'RL':
