MindMap 思维导图

辅助用户系统整理与表达思想的思维辅助工具。

import { MindMap } from '@ant-design/graphs';

何时使用

当信息繁杂或需明确逻辑关系时，将其梳理成一系列节点与分支，进而简化理解。

代码演示

基本用法

基本用法。

Linear Style

Boxed Style

风格

通过 type 语法糖，使用预设的风格：线条风格和方框风格。

RightLeftAlternate

Preview

节点分布

通过设置 direction 为 right left 分别让子节点右侧、左侧分布。若不设置 direction，则默认自由分布。

Click Icon to Expand/Collapse

Click Node to Expand/Collapse

Custom Icon

展开/收起子节点

通过配置 collapse-expand-react-node 交互来启用展开/收起子节点行为。具体可参考 CollapseExpandReactNodeOptions 获取详细配置说明。此外，还可以配置 defaultExpandLevel 来控制默认展开层级。

设置分支颜色

assign-color-by-branch 作为内部数据处理的环节之一，通过调整 colors 配置，可以为不同分支分配独特的颜色，以便更清晰地区分分支结构。具体可参考 AssignColorByBranchOptions 获取详细配置说明。

自定义节点

通过 node.component 来进行自定义节点，需要与 node.size 配合实现。

API

通用配置参考：图通用属性

MindMap

属性	说明	类型	默认值
data	数据	Data	-
layout	设置布局配置	Layout	-
type	语法糖，设置展示风格。当设置 `node.component` 时以后者为准	`'default'` \| `'linear'` \| `'boxed'`	`'default'`
direction	语法糖，设置节点的排布方向。当设置 `layout.direction` 时会以后者为准	`'left'` \| `'right'` \| `'alternate'`	`'alternate'`
nodeMinWidth	节点的最小宽度，当文字内容不足时将居中显示	`number`	`0` (`default` 类型) `120` (`boxed` 类型)
nodeMaxWidth	节点的最大宽度，超出部分将自动换行	`number`	`300`
defaultExpandLevel	默认展开层级，若不指定，将展开全部	number	-

Data

支持两种数据格式：

（👍 推荐） 树图数据

类型定义：

type TreeData = {
  id: string;
  children?: TreeData[];
  [key: string]: unknown;
};

例如：

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 },
      ],
    },
  ],
};

图数据。若开启“展开-收起”交互，需确保数据中包含 children 字段。

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' },
  ],
};

Layout

脑图布局，深度相同的节点将会被放置在同一层。参数如下：

属性	说明	类型	默认值
type	布局类型	string	`mindmap`
labelField	指定节点标签内容 - 从数据中选择一个字段，对应字段的值作为节点的标签 - 动态生成，将以节点数据为参数调用该函数，并使用返回值作为节点的标签	string \| ((node: NodeData) => string)	节点 ID
direction	树布局的方向	`H` \| `V`	`H`
getWidth	每个节点的宽度	(node: NodeData) => number	默认使用节点高度
getHeight	每个节点的高度	(node: NodeData) => number	默认使用节点宽度
getHGap	每个节点的水平间隙	(node: NodeData) => number	-
getVGap	每个节点的垂直间隙	(node: NodeData) => number	-
getSide	节点排布在根节点的左侧/右侧。若设置了该值，则所有节点会在根节点同一侧，即 direction = 'H' 不再起效。若该参数为回调函数，则可以指定每一个节点在根节点的左/右侧。	(node: NodeData) => string	-