CompactBox 紧凑树
阅读时间约 3 分钟
紧凑盒树布局。这是树图的默认布局,其特点是布局时统合考虑每个树节点的包围盒,由经典的 Reingold–Tilford tidy 布局算法演进而来,适合于脑图等应用场景。
配置项
direction
'LR' | 'RL' | 'TB' | 'BT' | 'H' | 'V' Default:
'LR'
树布局的方向
'TB'
:根节点在上,往下布局'BT'
:根节点在下,往上布局'LR'
:根节点在左,往右布局'RL'
:根节点在右,往左布局'H'
:根节点在中间,水平对称布局'V'
:根节点在中间,垂直对称布局
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 nodereturn 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
是否按照辐射状布局。若 radial
为 true
,建议 direction
设置为 'LR'
或 'RL'