AntvDagre 布局
上一篇
布局总览
下一篇
Circular 环形布局
Loading...
AntvDagre 在原先dagre布局的基础上增加了更多有用的设置项，比如nodeOrder、edgeLabelSpace等等。 dagre布局本身一种层次化布局，适用于有向无环图（DAG）的布局场景，能够自动处理节点之间的方向和间距，支持水平和垂直布局。参考更多 Dagre 布局样例或源码以及官方文档。
const graph = new Graph({layout: {type: 'antv-dagre',rankdir: 'TB',align: 'UL',nodesep: 50,ranksep: 50,controlPoints: false,},});
更多
dagre原生配置项可参考官方文档，这里仅列出部分核心配置和新增的配置
| 属性 | 描述 | 类型 | 默认值 | 必选 |
|---|---|---|---|---|
| type | 布局类型 | antv-dagre | - | ✓ |
| rankdir | 布局方向，可选值 | TB | BT | LR | RL | TB | |
| align | 节点对齐方式，可选值 | UL | UR | DL | DR | UL | |
| nodesep | 节点间距（px）。在rankdir 为 TB 或 BT 时是节点的水平间距；在rankdir 为 LR 或 RL 时代表节点的竖直方向间距 | number | 50 | |
| nodesepFunc | 节点间距（px）的回调函数，通过该参数可以对不同节点设置不同的节点间距。在rankdir 为 TB 或 BT 时是节点的水平间距；在rankdir 为 LR 或 RL 时代表节点的竖直方向间距。优先级高于 nodesep，即若设置了 nodesepFunc，则 nodesep 不生效 | (d?: Node) => number | ||
| ranksep | 层间距（px）。在rankdir 为 TB 或 BT 时是竖直方向相邻层间距；在rankdir 为 LR 或 RL 时代表水平方向相邻层间距 | number | 100 | |
| ranksepFunc | 层间距（px）的回调函数，通过该参数可以对不同层级设置不同的节点间距。在rankdir 为 TB 或 BT 时是节点的水平间距；在rankdir 为 LR 或 RL 时代表节点的竖直方向间距。优先级高于 ranksep，即若设置了 ranksepFunc，则 ranksep 不生效 | (d?: Node) => number | ||
| ranker | 为每个节点分配等级的算法，共支持三种算法，分别是：longest-path 最长路径算法、tight-tree 紧凑树算法、network-simplex 网络单形法 | network-simplex | tight-tree | longest-path | network-simplex | |
| nodeSize | 统一指定或为每个节点指定节点大小，用于防止节点重叠时的碰撞检测。如果仅返回单个number，则表示节点的宽度和高度相同；如果返回一个数组，则形如：[width, height] | Size | ((nodeData: Node) => Size) | |
| controlPoints | 是否保留边的控制点，仅在边配置中使用了内置折线（type: 'polyline-edge'） 时，或任何将自定义消费了 style.controlPoints 字段作为控制点位置的边时生效。本质上就是给边数据增加了 style.controlPoints | boolean | false | |
| begin | 布局的左上角对齐位置 | [number, number] | [number, number, number] | ||
| sortByCombo | 同一层节点是否根据每个节点数据中的 parentId 进行排序，以防止 Combo 重叠置 | boolean | false | |
| edgeLabelSpace | 是否为边的label留位置 | boolean | true | |
| nodeOrder | 同层节点顺序的参考数组，存放节点 id 值，若未指定，则将按照 dagre 本身机制排列同层节点顺序 | string[] | ||
| radial | 是否基于 dagre 进行辐射布局 | boolean | false | |
| focusNode | 关注的节点，注意，仅在radial 为 true 时生效 | ID | Node | null | ||
| preset | 布局计算时参考的节点位置，一般用于切换数据时保证重新布局的连续性。在 G6 中，若是更新数据，则将自动使用已存在的布局结果数据作为输入 | OutNode[] |
DagreAlign Default:
UL
节点对齐方式 U：upper（上）；D：down（下）；L：left（左）；R：right（右）
UL:对齐到左上角UR:对齐到右上角DL:对齐到左下角DR:对齐到右下角DagreRankdir Default:
TB
布局的方向。T：top（上）；B：bottom（下）；L：left（左）；R：right（右）
TB:从上至下布局BT:从下至上布局LR:从左至右布局RL:从右至左布局
network-simplex|tight-tree|longest-path
布局的模式
number Default: 50
层间距（px）
在 rankdir 为 'TB' 或 'BT' 时是竖直方向相邻层间距；在 rankdir 为 'LR' 或 'RL' 时代表水平方向相邻层间距。ranksepFunc 拥有更高的优先级
(d?: Node) => number
层间距（px）的回调函数
在 rankdir 为 'TB' 或 'BT' 时是竖直方向相邻层间距；在 rankdir 为 'LR' 或 'RL' 时代表水平方向相邻层间距。优先级高于 nodesep，即若设置了 nodesepFunc，则 nodesep 不生效
number Default: 50
节点间距（px）
在 rankdir 为 'TB' 或 'BT' 时是节点的水平间距；在 rankdir 为 'LR' 或 'RL' 时代表节点的竖直方向间距。nodesepFunc 拥有更高的优先级
(d?: Node) => number
节点间距（px）的回调函数，通过该参数可以对不同节点设置不同的节点间距
在 rankdir 为 'TB' 或 'BT' 时是节点的水平间距；在 rankdir 为 'LR' 或 'RL' 时代表节点的竖直方向间距。优先级高于 nodesep，即若设置了 nodesepFunc，则 nodesep 不生效
[number, number] | [number, number, number] Default: undefined
布局的左上角对齐位置
boolean Default: false
是否保留边的控制点，仅在边配置中使用了内置折线（type: 'polyline-edge'） 时，或任何将自定义消费了 style.controlPoints 字段作为控制点位置的边时生效。本质上就是给边数据增加了 style.controlPoints
boolean Default: true
是否为边的label留位置
这会影响是否在边中间添加dummy node
ID | Node | null
关注的节点，注意，仅在radial 为 true 时生效
string[] Default: undefined
同层节点顺序的参考数组，存放节点 id 值
若未指定，则将按照 dagre 本身机制排列同层节点顺序
Size | ((nodeData: Node) => Size) Default: undefined
统一指定或为每个节点指定节点大小。
用于防止节点重叠时的碰撞检测
OutNode[] Default: undefined
布局计算时参考的节点位置
一般用于切换数据时保证重新布局的连续性。在 G6 中，若是更新数据，则将自动使用已存在的布局结果数据作为输入
boolean
是否基于 dagre 进行辐射布局
boolean Default: false
同一层节点是否根据每个节点数据中的 parentId 进行排序，以防止 Combo 重叠
建议在有 Combo 的情况下配置
以下文档可以帮助你更好地理解Dagre 布局