Loading...
The CompactBox layout is suitable for visualizing structured tree data. It is evolved from the classic Reingold–Tilford tidy layout algorithm, and considers the bounding box of each tree node during layout, effectively maintaining the compactness and hierarchical clarity of the tree structure. See more CompactBox layout examples and source code.
const graph = new Graph({layout: {type: 'compact-box',direction: 'LR',getHeight: () => 16,getWidth: () => 16,getVGap: () => 16,getHGap: () => 40,},});
Property | Description | Type | Default | Required |
---|---|---|---|---|
type | Layout type | compact-box | - | ✓ |
direction | Layout direction, options | LR | RL | TB | BT | H | V | LR | |
getSide | Set whether the node is on the left or right of the root. Only works for H direction. See below | (d?: NodeData) => string | ||
getId | Callback for node id | (d?: NodeData) => string | ||
getWidth | Callback for node width | (d?: NodeData) => number | ||
getHeight | Callback for node height | (d?: NodeData) => number | ||
getHGap | Callback for horizontal gap | (d?: NodeData) => number | ||
getVGap | Callback for vertical gap | (d?: NodeData) => number | ||
radial | Whether to enable radial layout, see below | boolean | false |
LR
|RL
|TB
|BT
|H
|V
Default:LR
Tree layout direction
TB
: Root at the top, layout downwardsBT
: Root at the bottom, layout upwardsLR
: Root at the left, layout to the rightRL
: Root at the right, layout to the leftH
: Root in the middle, horizontal symmetric layout. You can use getSide
to specify the left/right logic for each nodeV
: Root in the middle, vertical symmetric layout(d?: NodeData) => string
Set whether the node is on the left or right of the root. Only works for H
direction. If not set, the algorithm will automatically assign left/right. See getSide auto logic.
Example:
(d) => {// d is a nodeif (d.id === 'test-child-id') return 'right';return 'left';};
(d?: NodeData) => string
Callback for node id
Example:
(d) => {// d is a nodereturn d.id + '_node';};
(d?: NodeData) => number
Callback for node width
Example:
(d) => {// d is a nodeif (d.id === 'testId') return 50;return 100;};
(d?: NodeData) => number
Callback for node height
Example:
(d) => {// d is a nodeif (d.id === 'testId') return 50;return 100;};
(d?: NodeData) => number
Callback for horizontal gap
Example:
(d) => {// d is a nodeif (d.id === 'testId') return 50;return 100;};
(d?: NodeData) => number
Callback for vertical gap
Example:
(d) => {// d is a nodeif (d.id === 'testId') return 50;return 100;};
boolean
Whether to use radial layout. If radial
is true
, it is recommended to set direction
to 'LR'
or 'RL'
.