概述

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

配置方式

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

配置项

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'很适合渲染血缘图中查看指定节点的上下游血缘的场景，上游分布在中心节点的左侧，下游分布在右侧；
• 思维导图：构建自定义的思维导图组件。