--- title: "Dagre 布局" description: "Dagre 布局" language: "zh" canonical: "https://g6.antv.antgroup.com/zh/manual/layout/DagreLayout/" version: "5.1.1" --- ## 概述 Dagre 是一种层次化布局，适用于有向无环图（DAG）的布局场景，能够自动处理节点之间的方向和间距，支持水平和垂直布局。参考更多 Dagre 布局[样例](/zh/examples/layout/dagre/)或[源码](https://github.com/dagrejs/dagre/blob/master/lib/layout.js)以及[官方文档](https://github.com/dagrejs/dagre/wiki)。 Dagre布局 ## 配置方式 ```js const graph = new Graph({ layout: { type: 'dagre', rankdir: 'TB', align: 'UL', nodesep: 50, ranksep: 50, }, }); ``` ## 配置项 > 更多配置项可参考[官方文档](https://github.com/dagrejs/dagre/wiki#configuring-the-layout) Dagre 布局配置项图解 | 属性 | 描述 | 类型 | 默认值 | 必选 | | --------------- | ----------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------- | ----------------- | ---- | | 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](https://www.graphviz.org/documentation/TSE93.pdf)，核心思想是迭代修改节点的层级，缩小松弛边。 ### nodeSize > number \| number[] \| () => (number \| number[]) G6自定义属性，统一指定或为每个节点指定节点大小。如果仅返回单个number，则表示节点的宽度和高度相同；如果返回一个数组，则形如：`[width, height]` ```js (d) => { // d 是一个节点 if (d.id === 'testId') return 20; return [10, 20]; }; ``` ### controlPoints > boolean， **Default**: false 是否保留边的控制点。 ## 布局适用场景 - **流程图**：适合展示流程图，节点之间的方向和间距会自动处理； - **依赖关系图**：展示软件包或模块之间的依赖关系； - **任务调度图**：展示任务之间的依赖关系和执行顺序。 ## 相关文档 > 以下文档可以帮助你更好地理解Dagre 布局 - [图布局算法｜详解 Dagre 布局](https://mp.weixin.qq.com/s/EdyTfFUH7fyMefNSBXI2nA) - [深入解读Dagre布局算法](https://www.yuque.com/antv/g6-blog/xxp5nl)