概述

紧凑树布局适用于结构化树形数据的展示，基于经典的 Reingold–Tilford tidy 布局算法 演进而来，通过布局时综合考虑每个树节点的包围盒，有效保持树结构的紧凑性与层次清晰。参考更多 CompactBox 布局样例和源码

使用场景

• 决策树: 通过紧凑树布局可简单直观的图形化展示每个决策路径
• 知识图谱: 展示概念之间的层级关系和连接，紧凑布局可以在有限空间内呈现复杂的知识网络

配置方式

const graph = new Graph({
  layout: {
    type: 'compact-box',
    direction: 'LR',
    getHeight: () => 16,
    getWidth: () => 16,
    getVGap: () => 16,
    getHGap: () => 40,
  },
});

配置项

direction

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

树布局方向

• TB：根节点在上，往下布局

  

• BT：根节点在下，往上布局

  

• LR：根节点在左，往右布局

  

• RL：根节点在右，往左布局

  

• H：根节点在中间，水平对称布局。可传入 getSide 方法指定每个节点的左右分布逻辑

  

• V：根节点在中间，垂直对称布局

  

getSide

(d?: NodeData) => string

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

示例：

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

getId

(d?: NodeData) => string

节点 id 的回调函数

示例：

(d) => {
  // d 是一个节点
  return d.id + '_node';
};

getWidth

(d?: NodeData) => number

每个节点的宽度

示例：

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

getHeight

(d?: NodeData) => number

每个节点的高度

示例：

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

getHGap

(d?: NodeData) => number

每个节点的水平间隙

示例：

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

getVGap

(d?: NodeData) => number

每个节点的垂直间隙

示例：

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

radial

boolean

是否按照辐射状布局。若 radial 为 true，建议 direction 设置为 'LR' 或 'RL'

代码示例