Dagre 流程图布局

Dagre 是适合有向流程图的布局算法。其根据图数据中边的方向,自动计算节点的层级及位置。

使用指南

G6 内置的 Dagre 布局可以实现有向图的自动分层布局。如下面代码所示,可在实例化 Graph 时使用该布局。除此之外,还可以如子图布局所示单独使用布局。该布局可以通过配置调整布局方向、节点对齐方式、节点间距、层高等。

  • 代码演示 1 :简单的 Dagre 布局。
  • 代码演示 2 :自左向右的 Dagre 布局。
  • 代码演示 3 :Dagre 布局参数动态变化。
Dagre 流程图自左向右的 DagreDagre 布局参数动态变化

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
说明:是否保留布局连线的控制点