mirror of
https://gitee.com/antv/g6.git
synced 2024-12-15 18:11:08 +08:00
3.6 KiB
3.6 KiB
title | order |
---|---|
CompactBox 紧凑树 | 13 |
紧凑盒树布局。这是树图的默认布局,其特点是布局时统合考虑每个树节点的包围盒,由经典的 Reingold–Tilford tidy 布局算法演进而来,适合于脑图等应用场景。
direction
类型:String
可选值:'LR' | 'RL' | 'TB' | 'BT' | 'H' | 'V'
默认值:'LR'
是否必须:false
说明:树布局的方向,其他选项说明
- TB —— 根节点在上,往下布局
- BT —— 根节点在下,往上布局
- LR —— 根节点在左,往右布局
- RL —— 根节点在右,往左布局
- H —— 根节点在中间,水平对称布局
- V —— 根节点在中间,垂直对称布局
getSide
类型:Function
示例:
(d) => {
// d 是一个节点
if (d.id === 'test-child-id') return 'right';
return 'left';
};
默认值:'right'
是否必须:false
说明:节点排布在根节点的左侧/右侧。若设置了该值,则所有节点会在根节点同一侧,即 direction = 'H' 不再起效。若该参数为回调函数,则可以指定每一个节点在根节点的左/右侧。
getId
类型: Function
示例:
(d) => {
// d is a node
return d.id + '_node';
};
是否必须: false
说明: 节点 id 的回调函数
getWidth
类型:Number | Function
示例:
(d) => {
// d 是一个节点
if (d.id === 'testId') return 50;
return 100;
};
是否必须:false
说明:每个节点的宽度
getHeight
类型:Number | Function
示例:
(d) => {
// d 是一个节点
if (d.id === 'testId') return 50;
return 100;
};
是否必须:false
说明:每个节点的高度
getHGap
类型:Number | Function
示例:
(d) => {
// d 是一个节点
if (d.id === 'testId') return 50;
return 100;
};
默认值:18
是否必须:false
说明:每个节点的水平间隙
getVGap
类型:Number | Function
示例:
(d) => {
// d 是一个节点
if (d.id === 'testId') return 50;
return 100;
};
默认值:18
是否必须:false
说明:每个节点的垂直间隙
radial
类型:Boolean
默认值:false
是否必须:false
说明:是否按照辐射状布局。若 radial
为 true
,建议 direction
设置为 'LR'
或 'RL'
: