Dagre 布局

概述

Dagre 是一种层次化布局，适用于有向无环图（DAG）的布局场景，能够自动处理节点之间的方向和间距，支持水平和垂直布局。参考更多 Dagre 布局样例或源码以及官方文档。

配置方式

const graph = new Graph({
  layout: {
    type: 'dagre',
    rankdir: 'TB',
    align: 'UL',
    nodesep: 50,
    ranksep: 50,
  },
});

配置项

更多配置项可参考官方文档

属性	描述	类型	默认值	必选
type	布局类型	`dagre`	-	✓
rankdir	布局方向，可选值	`TB` \| `BT` \| `LR` \| `RL`	`TB`
align	节点对齐方式，可选值	`UL` \| `UR` \| `DL` \| `DR`	`UL`
nodesep	节点间距（px）。在 rankdir 为 `TB` 或 `BT` 时是节点的水平间距；在 rankdir 为 `LR` 或 `RL` 时代表节点的竖直方向间距	number	50
ranksep	层间距（px）。在 rankdir 为 `TB` 或 `BT` 时是竖直方向相邻层间距；在 rankdir 为 `LR` 或 `RL` 时代表水平方向相邻层间距	number	100
ranker	为每个节点分配等级的算法，共支持三种算法，分别是：`longest-path`、`tight-tree`、`network-simplex`	`network-simplex` \| `tight-tree` \| `longest-path`	`network-simplex`
directed	是否按有向图处理	boolean	true
compound	是否支持嵌套结构	boolean	true
multigraph	是否允许多重边	boolean	true
nodeSize	G6 自定义属性，统一指定或为每个节点指定节点大小。如果仅返回单个 number，则表示节点的宽度和高度相同；如果返回一个数组，则形如：`[width, height]`	number \| number[] \| () => (number \| number[])	[0, 0]
edgeMinLen	边跨越的最小层数	number \| (edge) => number	1
edgeWeight	边权重，用于影响优化优先级	number \| (edge) => number
edgeLabelSize	边标签尺寸，用于预留空间	number[] \| (edge) => number[]
edgeLabelPos	边标签位置	string \| (edge) => string
edgeLabelOffset	标签与边的偏移	number \| (edge) => number

补充：dagre 不需要单独配置 controlPoints，G6 会把布局输出的折线点自动转换为边的 style.controlPoints。

rankdir

TB | BT | LR | RL， Default: TB

布局方向

TB：从上到下；

BT：从下到上；

LR：从左到右；

RL：从右到左。

align

UL | UR | DL | DR， Default: UL

节点对齐方式

UL：左上对齐
UR：右上对齐
DL：左下对齐
DR：右下对齐

nodesep

number， Default: 50

节点间距（px）。在rankdir 为 TB 或 BT 时是节点的水平间距；在rankdir 为 LR 或 RL 时代表节点的竖直方向间距

ranksep

number， Default: 50

层间距（px）。在rankdir 为 TB 或 BT 时是竖直方向相邻层间距；在rankdir 为 LR 或 RL 时代表水平方向相邻层间距

ranker

network-simplex | tight-tree | longest-path， Default: network-simplex

为每个节点分配层级的算法，共支持三种算法，分别是：

longest-path：最长路径算法，使用DFS深度优先搜索，递归查找每个节点的最长路径。优点是计算简单速度快，但会导致长边过多；
tight-tree：紧凑树算法，一种优化算法，目的是减少长边的数量。先用最长路径算法longest-path计算出初始层级，然后调整松弛边的长度，从而构建可行树。
network-simplex：网络单形法，参考算法A Technique for Drawing Directed Graphs，核心思想是迭代修改节点的层级，缩小松弛边。

nodeSize

number | number[] | () => (number | number[])

G6自定义属性，统一指定或为每个节点指定节点大小。如果仅返回单个number，则表示节点的宽度和高度相同；如果返回一个数组，则形如：[width, height]

(d) => {
  // d 是一个节点
  if (d.id === 'testId') return 20;
  return [10, 20];
};

controlPoints

boolean， Default: false

是否保留边的控制点。

布局适用场景

流程图：适合展示流程图，节点之间的方向和间距会自动处理；
依赖关系图：展示软件包或模块之间的依赖关系；
任务调度图：展示任务之间的依赖关系和执行顺序。