AntV Dagre 布局 AntvDagre

概述

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）的回调函数，优先级高于 `nodesep`	(d?: Node) => number	-
ranksep	层间距（px）。在 rankdir 为 `TB` 或 `BT` 时是竖直方向相邻层间距；在 rankdir 为 `LR` 或 `RL` 时代表水平方向相邻层间距	number	50
ranksepFunc	层间距（px）的回调函数，优先级高于 `ranksep`	(d?: Node) => number	-
ranker	为每个节点分配等级的算法，共支持三种算法：`longest-path`、`tight-tree`、`network-simplex`	`network-simplex` \| `tight-tree` \| `longest-path`	-
nodeSize	统一指定或为每个节点指定节点大小，用于占位与间距计算	Size \| ((nodeData: Node) => Size)	-
controlPoints	是否保留边的控制点，仅在边配置中使用了内置折线（type: ‘polyline-edge’）时，或任何将自定义消费了 `style.controlPoints` 字段作为控制点位置的边时生效	boolean	false
begin	布局的左上角对齐位置	[number, number] \| [number, number, number]	-
sortByCombo	同一层节点是否根据每个节点数据中的 `parentId` 进行排序，以防止 Combo 重叠	boolean	false
edgeLabelSpace	是否为边的 label 预留位置	boolean	true
nodeOrder	同层节点顺序的参考数组，存放节点 id 值	string[]	-
radial	是否基于 `dagre` 进行辐射布局	boolean	-
focusNode	关注的节点，仅在 `radial` 为 true 时生效	ID \| Node \| null	-
preset	布局计算时参考的节点位置，一般用于切换数据时保证重新布局的连续性	NodeData[]	-

补充：在 G6 中，antv-dagre 计算得到的控制点会被写入边的 style.controlPoints。

align

DagreAlign Default: UL

节点对齐方式 U：upper（上）；D：down（下）；L：left（左）；R：right（右）

UL:对齐到左上角
UR:对齐到右上角
DL:对齐到左下角
DR:对齐到右下角

rankdir

DagreRankdir Default: TB

布局的方向。T：top（上）；B：bottom（下）；L：left（左）；R：right（右）

TB:从上至下布局
BT:从下至上布局
LR:从左至右布局
RL:从右至左布局

ranker

network-simplex | tight-tree | longest-path

布局的模式

ranksep

number Default: 50

层间距（px）

在 rankdir 为 ‘TB’ 或 ‘BT’ 时是竖直方向相邻层间距；在 rankdir 为 ‘LR’ 或 ‘RL’ 时代表水平方向相邻层间距。ranksepFunc 拥有更高的优先级

ranksepFunc

(d?: Node) => number

层间距（px）的回调函数

在 rankdir 为 ‘TB’ 或 ‘BT’ 时是竖直方向相邻层间距；在 rankdir 为 ‘LR’ 或 ‘RL’ 时代表水平方向相邻层间距。优先级高于 nodesep，即若设置了 nodesepFunc，则 nodesep 不生效

nodesep

number Default: 50

节点间距（px）

在 rankdir 为 ‘TB’ 或 ‘BT’ 时是节点的水平间距；在 rankdir 为 ‘LR’ 或 ‘RL’ 时代表节点的竖直方向间距。nodesepFunc 拥有更高的优先级

nodesepFunc

(d?: Node) => number

节点间距（px）的回调函数，通过该参数可以对不同节点设置不同的节点间距

在 rankdir 为 ‘TB’ 或 ‘BT’ 时是节点的水平间距；在 rankdir 为 ‘LR’ 或 ‘RL’ 时代表节点的竖直方向间距。优先级高于 nodesep，即若设置了 nodesepFunc，则 nodesep 不生效

begin

[number, number] | [number, number, number] Default: undefined

布局的左上角对齐位置

controlPoints

boolean Default: false

是否保留边的控制点，仅在边配置中使用了内置折线（type: ‘polyline-edge’）时，或任何将自定义消费了 style.controlPoints 字段作为控制点位置的边时生效。本质上就是给边数据增加了 style.controlPoints

edgeLabelSpace

boolean Default: true

是否为边的label留位置

这会影响是否在边中间添加dummy node

focusNode

ID | Node | null

关注的节点，注意，仅在radial 为 true 时生效

ID: 节点 id
Node: 节点实例
null: 取消关注

nodeOrder

string[] Default: undefined

同层节点顺序的参考数组，存放节点 id 值

若未指定，则将按照 dagre 本身机制排列同层节点顺序

nodeSize

Size | ((nodeData: Node) => Size) Default: undefined

统一指定或为每个节点指定节点大小。

用于防止节点重叠时的碰撞检测

preset

OutNode[] Default: undefined

布局计算时参考的节点位置

一般用于切换数据时保证重新布局的连续性。在 G6 中，若是更新数据，则将自动使用已存在的布局结果数据作为输入

radial

boolean

是否基于 dagre 进行辐射布局

sortByCombo