Dagre 布局

概述

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

配置方式

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

配置项

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

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

是否保留边的控制点。

布局适用场景

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

相关文档

以下文档可以帮助你更好地理解Dagre 布局

• 图布局算法｜详解 Dagre 布局
• 深入解读Dagre布局算法