IndentedTree
Previous
Fishbone
Next
Dendrogram
Loading...
An indented tree is used to represent hierarchical data, displaying parent-child relationships through indentation.
import { IndentedTree } from '@ant-design/graphs';
For general graph properties, refer to: General Graph Properties
| Property | Description | Type | Default Value |
|---|---|---|---|
| data | The dataset | Data | - |
| labelField | Specifies the node label content - Select a field from the data, and the corresponding field value will be used as the node label - Dynamically generated: this function will be called with node data as a parameter, and its return value will be used as the node label | string | ((node: NodeData) => string) | Node ID |
| type | Syntactic sugar for setting the display style. When node.component is set, it takes precedence | 'default' | 'linear' | 'boxed' | 'default' |
| direction | Syntactic sugar for setting the arrangement direction of nodes. When layout.direction is set, it takes precedence | 'left' | 'right' | 'alternate' | 'right' |
| nodeMinWidth | Minimum width of a node; if the text content is not enough, it will be centered | number | 0 |
| nodeMaxWidth | Maximum width of a node; excess content will automatically wrap to the next line | number | 300 |
| defaultExpandLevel | The default expansion level; if not specified, all levels will be expanded | number | - |
| layout | Configuration for the indented tree layout | Layout | - |
Two data formats are supported:
Type Definition:
type TreeData = {id: string;children?: TreeData[];[key: string]: unknown;};
Example:
const data = {id: 'root',children: [{id: 'Child 1',value: 10,children: [{ id: 'Sub 1-1', value: 5 },{ id: 'Sub 1-2', value: 5 },],},{id: 'Child 2',value: 20,children: [{ id: 'Sub 2-1', value: 10 },{ id: 'Sub 2-2', value: 10 },],},],};
expand-collapse behavior is enabled, make sure the children field is included in the data.const graphData = {nodes: [{ id: '1', data: { label: 'Node 1' }, children: ['2', '3'] },{ id: '2', data: { label: 'Node 2' }, children: ['4'] },{ id: '3', data: { label: 'Node 3' } },{ id: '4', data: { label: 'Node 4' } },],edges: [{ source: '1', target: '2' },{ source: '1', target: '3' },{ source: '2', target: '4' },],};
Indented tree layout, where the hierarchy of tree nodes is represented by horizontal indentation. Each element occupies a single line/column. Parameters are as follows:
| Property | Description | Type | Default Value |
|---|---|---|---|
| type | Layout type | string | indented |
| direction | Direction of the tree layout | LR | RL | H | LR |
| indent | Spacing between columns. When the type is Number, the spacing is fixed; when the type is Function, the spacing between the node and the root node is the return value of the function | number | (node: NodeData) => string | 20 |
| getWidth | Width of each node, effective when direction is H | (node: NodeData) => number | Default is node width |
| getHeight | Height of each node | (node: NodeData) => number | Default is node height |
| getSide | Specifies whether nodes are arranged on the left/right side of the root node. If set, all nodes will be on the same side of the root node, making direction = 'H' ineffective. If this parameter is a callback function, it can specify whether each node is on the left/right side of the root node | (node: NodeData) => string | - |
| dropCap | Whether the first child node of each node is positioned on the next line | boolean | true |