MindMap
Previous
Overview
Next
Fishbone
Loading...
A mind-mapping tool to help users organize and express their thoughts systematically.
import { MindMap } from '@ant-design/graphs';
When information is complex or requires clear logical relationships, organize it into a series of nodes and branches to simplify understanding.
For general graph properties, refer to: General Graph Properties
| Property | Description | Type | Default Value |
|---|---|---|---|
| data | The dataset | Data | - |
| layout | Configuration for setting the layout | Layout | - |
| 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' | 'alternate' |
| nodeMinWidth | Minimum width of a node; if the text content is insufficient, it will be centered | number | 0 (default type) 120 (boxed type) |
| 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 | - |
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' },],};
Mind map layout, where nodes at the same depth are placed on the same level. Parameters are as follows:
| Property | Description | Type | Default Value |
|---|---|---|---|
| type | Layout type | string | mindmap |
| 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 |
| direction | Direction of the tree layout | H | V | H |
| getWidth | Width of each node | (node: NodeData) => number | Default is node height |
| getHeight | Height of each node | (node: NodeData) => number | Default is node width |
| getHGap | Horizontal gap between each node | (node: NodeData) => number | - |
| getVGap | Vertical gap between each node | (node: NodeData) => number | - |
| 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 | - |