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）的回调函数，通过该参数可以对不同节点设置不同的节点间距。在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[]

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

boolean Default: false

同一层节点是否根据每个节点数据中的 parentId 进行排序，以防止 Combo 重叠

建议在有 Combo 的情况下配置

布局适用场景

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

概述

配置方式

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[]

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）的回调函数

nodesep

number Default: 50

节点间距（px）

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

nodesepFunc

(d?: Node) => number

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

begin

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

布局的左上角对齐位置

controlPoints

boolean Default: false

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

boolean Default: false

同一层节点是否根据每个节点数据中的 parentId 进行排序，以防止 Combo 重叠

建议在有 Combo 的情况下配置

布局适用场景

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

AntV Dagre 布局 AntvDagre

AntV Dagre 布局 AntvDagre

概述

配置方式

配置项

align

rankdir

ranker

ranksep

ranksepFunc

nodesep

nodesepFunc

begin

controlPoints

edgeLabelSpace

focusNode

nodeOrder

nodeSize

preset

radial

sortByCombo

布局适用场景

相关文档

概述

配置方式

配置项

align

rankdir

ranker

ranksep

ranksepFunc

nodesep

nodesepFunc

begin

controlPoints

edgeLabelSpace

focusNode

nodeOrder

nodeSize

preset

radial

sortByCombo

布局适用场景

相关文档