Dagre 流程图布局
Dagre 是适合有向流程图的布局算法。其根据图数据中边的方向,自动计算节点的层级及位置。
使用指南
G6 内置的 Dagre 布局可以实现有向图的自动分层布局。如下面代码所示,可在实例化 Graph 时使用该布局。除此之外,还可以如子图布局所示单独使用布局。该布局可以通过配置调整布局方向、节点对齐方式、节点间距、层高等。
- 代码演示 1 :简单的 Dagre 布局。
- 代码演示 2 :自左向右的 Dagre 布局。
- 代码演示 3 :Dagre 布局参数动态变化。
rankdir
类型: String
可选值:'TB' | 'BT' | 'LR' | 'RL'
默认值:'TB'
是否必须:false
说明:布局的方向。T:top(上);B:bottom(下);L:left(左);R:right(右)。
- 'TB':从上至下布局;
- 'BT':从下至上布局;
- 'LR':从左至右布局;
- 'RL':从右至左布局。
align
类型: String
可选值:'UL' | 'UR' | 'DL' | 'DR'
默认值:'UL'
是否必须:false
说明:节点对齐方式。U:upper(上);D:down(下);L:left(左);R:right(右)
- 'UL':对齐到左上角;
- 'UR':对齐到右上角;
- 'DL':对齐到左下角;
- 'DR':对齐到右下角。
nodesep
类型: Number
默认值:50
是否必须:false
说明:节点间距(px)
ranksep
类型: Number
默认值:50
是否必须:false
说明:层间距(px)
controlPoints
类型: Boolean
默认值:true
是否必须:false
说明:是否保留布局连线的控制点