TreeGraph Layout
CompactBox 紧凑树布局
紧凑盒树布局。这是树图的默认布局，其特点是布局时统合考虑每个树节点的包围盒，由经典的 Reingold–Tilford tidy 布局算法演进而来，适合于脑图等应用场景。
属性
direction
类型：String
可选值：'LR' | 'RL' | 'TB' | 'BT' | 'H' | 'V'
默认值：'LR'
是否必须：false
说明：树布局的方向，其他选项说明
- TB —— 根节点在上，往下布局
- BT —— 根节点在下，往上布局
- LR —— 根节点在左，往右布局
- RL —— 根节点在右，往左布局
- H —— 根节点在中间，水平对称布局
- V —— 根节点在中间，垂直对称布局
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'：
Dendrogram 生态树布局
生态树布局的特点是所有子节点布局在同一层级，不考虑节点大小，每个节点被当成 1px 处理。适用于表示层次聚类。
属性
direction
类型：String
可选值：'LR' | 'RL' | 'TB' | 'BT' | 'H' | 'V'
默认值：'LR'
是否必须：false
说明：树布局的方向，默认为 'LR'，其他选项说明
- TB —— 根节点在上，往下布局
- BT —— 根节点在下，往上布局
- LR —— 根节点在左，往右布局
- RL —— 根节点在右，往左布局
- H —— 根节点在中间，水平对称布局
- V —— 根节点在中间，垂直对称布局
nodeSep
类型：Number
默认值：0
是否必须：false
说明：节点间距
rankSep
类型：Number
默认值：0
是否必须：false
说明：层与层之间的间距
radial
类型：Boolean
默认值：false
是否必须：false
说明：是否按照辐射状布局。若 radial 为 true，建议 direction 设置为 'LR' 或 'RL'：
Indented 缩进树布局
缩进树布局。树节点的层级通过水平方向的缩进量来表示。每个元素会占一行/一列。常用场景是文件目录结构。
属性
direction
类型：String
可选值：'LR' | 'RL' | 'H'
默认值：'LR'
是否必须：false
说明：树布局的方向，默认为 'LR'，其他选项说明：
- LR —— 根节点在左，往右布局（下图左）
- RL —— 根节点在右，往左布局（下图中）
- H —— 根节点在中间，水平对称布局（下图右）
（左）LR。（中）RL。（右）H。
indent
类型：Number
默认值：20
是否必须：false
说明：列间间距
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
说明：每个节点的高度
getSide
类型：Function
示例：
d => {
// d 是一个节点
if (d.id === 'testId') return 'left';
return 'right';
};
是否必须：false
说明：节点放置在根节点左侧或右侧的回调函数，仅对与根节点直接相连的节点有效，设置后将会影响被设置节点的所有子孙节点。
Mindmap 脑图树布局
深度相同的节点将会被放置在同一层，与 compactBox 不同的是，布局不会考虑节点的大小。
属性
direction
类型：String
可选值：'H' | 'V'
默认值：'H'
是否必须：false
说明：树布局的方向，默认为 'H'，其他选项说明
- H：horizontal（水平）—— 根节点的子节点分成两部分横向放置在根节点左右两侧
- V：vertical （竖直）—— 将根节点的所有孩子纵向排列
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
说明：每个节点的垂直间隙
getSide
类型：Function
示例：
d => {
// d 是一个节点
if (d.id === 'test-child-id') return 'right';
return 'left';
};
默认值：'right'
是否必须：false
说明：节点排布在根节点的左侧/右侧。若设置了该值，则所有节点会在根节点同一侧，即 direction = 'H' 不再起效。若该参数为回调函数，则可以指定每一个节点在根节点的左/右侧。