CompactBox 紧凑树

阅读时间约 3 分钟

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

img

配置项

direction

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

树布局的方向

  • 'TB':根节点在上,往下布局

    img
  • 'BT':根节点在下,往上布局

    img
  • 'LR':根节点在左,往右布局

    img
  • 'RL':根节点在右,往左布局

    img
  • 'H':根节点在中间,水平对称布局

    img
  • 'V':根节点在中间,垂直对称布局

    img

getSide

(d?: Node) => string

节点排布在根节点的左侧/右侧。若设置了该值,则所有节点会在根节点同一侧,即 direction = 'H' 不再起效。若该参数为回调函数,则可以指定每一个节点在根节点的左/右侧。

示例:

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

getId

(d?: Node) => string

节点 id 的回调函数

示例:

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

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;
};

radial

boolean

是否按照辐射状布局。若 radialtrue,建议 direction 设置为 'LR''RL'

img
上一篇
ComboCombined 复合布局
下一篇
Concentric 同心圆布局