CompactBox 紧凑树布局

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

属性

direction

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

  • TB —— 根节点在上，往下布局CompactBox 紧凑树布局 - 图2

  • BT —— 根节点在下，往上布局CompactBox 紧凑树布局 - 图3

  • LR —— 根节点在左，往右布局CompactBox 紧凑树布局 - 图4

  • RL —— 根节点在右，往左布局CompactBox 紧凑树布局 - 图5

  • H —— 根节点在中间，水平对称布局CompactBox 紧凑树布局 - 图6

  • V —— 根节点在中间，垂直对称布局CompactBox 紧凑树布局 - 图7

getWidth

类型：Number | Function示例：

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

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

getHeight

类型：Number | Function示例：

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

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

getHGap

类型：Number | Function示例：

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

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

getVGap

类型：Number | Function示例：

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

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

radial

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