Dendrogram Layout
Previous
Dagre Layout
Next
Fishbone Layout
Loading...
The dendrogram layout is suitable for visualizing hierarchical clustering data. Its feature is that all child nodes are laid out on the same level, node size is not considered, and each node is treated as 1px.
const graph = new Graph({layout: {type: 'dendrogram',direction: 'LR',nodeSep: 30,rankSep: 250,radial: false,},});
Property | Description | Type | Default | Required |
---|---|---|---|---|
type | Layout type | dendrogram | - | ✓ |
direction | Layout direction, options | LR | RL | TB | BT | H | V | LR | |
nodeSep | Node spacing, distance between nodes on the same level | number | 20 | |
rankSep | Rank spacing, distance between different levels | number | 200 | |
radial | Whether to enable radial layout, see below | boolean | false |
Tree layout direction options:
TB
: Root at the top, layout downwardBT
: Root at the bottom, layout upwardLR
: Root at the left, layout to the rightRL
: Root at the right, layout to the leftH
: Root in the middle, horizontal symmetric layoutV
: Root in the middle, vertical symmetric layoutWhether to enable radial layout mode. When enabled, nodes are distributed radially around the root node.
If radial
is set to true
, it is recommended to set direction
to 'LR'
or 'RL'
for best results.