脑图树 Mindmap

概述

脑图树布局适用于树状结构的层次化布局，支持左右两侧展开，深度相同的节点将会被放置在同一层。需要注意：布局会考虑节点的大小。参考更多脑图布局样例或源码。

配置方式

const graph = new Graph({
  layout: {
    type: 'mindmap',
    direction: 'H',
    preLayout: false,
    getHeight: () => 32,
    getWidth: () => 32,
    getVGap: () => 16,
    getHGap: () => 72,
  },
});

配置项

属性	描述	类型	默认值	必选
type	布局类型	`mindmap`	-	✓
direction	布局方向，可选值	`H` \| `LR` \| `RL` \| `TB` \| `BT`	`LR`
getHeight	计算每个节点的高度	(d?: Node) => number		✓
getWidth	计算每个节点的宽度	(d?: Node) => number		✓
getVGap	每个节点的垂直间隙，注意实际两个节点间的垂直间隙是2倍的vgap	(d?: Node) => number
getHGap	每个节点的水平间隙，注意实际两个节点间的水平间隙是2倍的hgap	(d?: Node) => number
getSide	设置节点排布在根节点的左侧/右侧，如未设置，则算法自动分配左侧/右侧。注意：该参数仅在`H`布局方向上生效	(d?: Node) => string

direction

H | LR | RL | TB | BT Default: 'LR'

树布局的方向

'H'：horizontal（水平）—— 根节点的子节点分成两部分横向放置在根节点左右两侧。可传入getSide方法指定每个节点的左右分布逻辑，不传则默认将前半部分放置在右侧，后半部分放置在左侧。

'LR' | 'TB'：将子节点排布在根节点的右侧；

'RL'：将子节点排布在根节点的左侧；

BT：将子节点排布在根节点右侧，然后将整个图沿X轴旋转180°；

getWidth

(d?: Node) => number

每个节点的宽度

示例：

(d) => {
  // d 是一个节点
  if (d.id === 'testId') return 50;
  return 100;
};

getHeight

(d?: Node) => number

每个节点的高度

示例：

(d) => {
  // d 是一个节点
  if (d.id === 'testId') return 50;
  return 100;
};

getHGap

(d?: Node) => number

每个节点的水平间隙

示例：

(d) => {
  // d 是一个节点
  if (d.id === 'testId') return 50;
  return 100;
};

getVGap

(d?: Node) => number

每个节点的垂直间隙

示例：

(d) => {
  // d 是一个节点
  if (d.id === 'testId') return 50;
  return 100;
};

getSide

(d?: Node) => string

设置节点排布在根节点的左侧/右侧。注意：该参数仅在direction为H时生效。如未设置，会默认将子节点前半部分放置在右侧，后半部分放置在左侧，参考getSide自动计算逻辑。

示例：

(d) => {
  // d 是一个节点
  if (d.id === 'test-child-id') return 'right';
  return 'left';
};

布局适用场景

数据血缘图：direction='H'很适合渲染血缘图中查看指定节点的上下游血缘的场景，上游分布在中心节点的左侧，下游分布在右侧；
思维导图：构建自定义的思维导图组件。