logoCreated with Sketch.

F6

CompactBox 紧凑树

阅读时间约 2 分钟
紧凑盒树布局。这是树图的默认布局，其特点是布局时统合考虑每个树节点的包围盒，由经典的 Reingold–Tilford tidy 布局算法演进而来，适合于脑图等应用场景。
img

layoutCfg.direction

类型：String
可选值：'LR' | 'RL' | 'TB' | 'BT' | 'H' | 'V'
默认值：'LR'
是否必须：false
说明：树布局的方向，其他选项说明

  • TB —— 根节点在上，往下布局
img
  • BT —— 根节点在下，往上布局
img
  • LR —— 根节点在左，往右布局
img
  • RL —— 根节点在右，往左布局
img
  • H —— 根节点在中间，水平对称布局
img
  • V —— 根节点在中间，垂直对称布局
img

layoutCfg.getSide

类型: Function
类型:

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

默认值: 'right'
是否必须: false
说明: 节点排布在根节点的左侧/右侧。若设置了该值，则所有节点会在根节点同一侧，即 direction = 'H' 不再起效。若该参数为回调函数，则可以指定每一个节点在根节点的左/右侧。

layoutCfg.getId

类型: Function
示例:

(d) => {
  // d is a node
  return d.id + '_node';
};

是否必须: false
说明: 节点 id 的回调函数

layoutCfg.getWidth

类型：Number | Function
示例：

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

是否必须：false
说明：每个节点的宽度

layoutCfg.getHeight

类型：Number | Function
示例：

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

是否必须：false
说明：每个节点的高度

layoutCfg.getHGap

类型：Number | Function
示例：

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

默认值：18
是否必须：false
说明：每个节点的水平间隙

layoutCfg.getVGap

类型：Number | Function
示例：

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

默认值：18
是否必须：false
说明：每个节点的垂直间隙

layoutCfg.radial

类型：Boolean
默认值：false
是否必须：false
说明：是否按照辐射状布局。若 radial 为 true，建议 direction 设置为 'LR' 或 'RL'：

img