TreeGraph - layout配置项 - 《蚂蚁金服 G6 API 文档》

layout配置项

layout配置项

layout目前支持dendrogram、compactBox、mindmap和indeted四种布局方式。

通用配置项

名称	类型	默认值	描述
type	string	dendrogram	布局类型，支持dendrogram、compactBox、mindmap和indeted。
direction	string	LR	布局方向，有 `LR` , `RL` , `TB` , `BT` , `H` , `V` 可选。L: 左； R: 右； T: 上； B：下； H: 垂直； V: 水平。
getChildren	Function		返回当前节点的所有子节点

⚠️注意：当type=indeted时，direction只能取LR、RL和H这三个值。

dendrogram

dendrogram示意图

使用dendrogram方式布局时，direction取不同值时的效果如下所示。

LR	RL	H

TB	BT	V

dendrogram配置项

名称	类型	默认值	描述
nodeSep	number	20	同层次节点之间的间距
rankSep	number	200	相邻层级节点之间的间距
nodeSize	number	20	节点大小
subTreeSep	number	10	子树之间的间距
isHorizontal	boolean	true	是否是水平方向，默认为水平方向

compactBox

compactBox示意图

使用compactBox方式布局时，direction取不同值时的效果如下所示。

LR	RL	H

TB	BT	V

compactBox配置项

名称	类型	默认值	描述
getId	Function		指定节点ID
getHeight	Function	36	指定节点高度
getWidth	Function	18	指定节点宽度
getVGap	Function	18	指定节点之间的垂直间距
getHGap	Function	18	指定节点之间的水平间距

⚠️注意：使用getWidth、getHeight、getVGap和getHGap指定节点的宽高及间距后，并不会改变节点的大小，具体原理如下所示：

/*
 * Gaps: filling space between nodes
 * (x, y) ----------------------
 * |            vgap            |
 * |    --------------------    h
 * | h |                    |   e
 * | g |                    |   i
 * | a |                    |   g
 * | p |                    |   h
 * |   ---------------------    t
 * |                            |
 *  -----------width------------
 */

🦁以上原理同样适用于indented和mindmap布局。

indented

indented示意图

使用indented方式布局时，direction取不同值时的效果如下所示。

LR	RL	H

indented配置项

名称	类型	默认值	描述
indent	number	20	与直接父节点的缩进值
getVGap	Function	18	指定节点之间的垂直间距
getHeight	Function	36	指定节点的高度

mindmap

mindmap示意图mindmap配置项

名称	类型	默认值	描述
getId	Function		指定节点ID
getHeight	Function	36	指定节点高度
getWidth	Function	18	指定节点宽度
getSide	Function		指定当前节点在主题的左边 (left) 还是右边 (right)
getSubTreeSep	Function	0	指定子节点之间的高度间隔
getVGap	Function	18	指定节点的垂直间距
getHGap	Function	18	指定节点的水平间距