G6 AntvDagre 布局完全指南：层次化 DAG 布局的配置、原理与实战

数据可视化前端图表库【免费下载链接】G6♾ A Graph Visualization Framework in JavaScript.项目地址https://gitcode.com/gh_mirrors/g6/G6点击查看免费下载导读antv-dagre是 G6 内置的层次化布局适用于有向无环图DAG场景能够自动处理节点之间的方向与间距支持上下、左右四种布局方向并在此基础上扩展了nodeOrder、edgeLabelSpace、sortByCombo、radial等增强配置。阅读本文后你将掌握如何在 G6 中配置antv-dagre布局、理解每一项核心配置项的语义与底层实现并能在流程图、依赖关系图、任务调度图以及带 Combo 的复杂图场景中直接落地使用。认识 AntvDagre从 dagre 到 antv-dagreAntvDagre 是 G6基于antv/layout对经典 dagre 布局的增强实现。dagre布局本身是一种层次化布局算法它将图的节点按层级rank划分再在同层内排序、计算坐标最终输出节点位置与边的路径点。其典型特征是适用于有向无环图DAG能自动处理节点之间的方向和间距支持水平布局LR / RL与垂直布局TB / BT节点天然按拓扑层次排布边走向清晰。AntvDagre 在原生 dagre 的基础上增加了更多实用的设置项例如nodeOrder手动指定同层节点的排列顺序edgeLabelSpace为边的 label 预留位置sortByCombo同一层节点按parentId排序防止 Combo 重叠controlPoints保留边控制点以配合折线边radial/focusNode基于 dagre 的辐射布局变体preset参考上一次布局结果保证数据更新后重排的连续性。从源码结构看G6 的注册表中同时内置了antv-dagre与dagre两种布局见 build-in.ts其中antv-dagre对应antv/layout2.x 的AntVDagreLayout实现是当前推荐使用的版本dagre则对应旧版1.x布局适配。快速上手五分钟接入 antv-dagre在 G6 中你只需要在Graph的layout配置中声明type: antv-dagre即可启用该布局const graph new Graph({ container: container, data: { nodes: [ { id: A }, { id: B }, { id: C }, { id: D }, ], edges: [ { source: A, target: B }, { source: A, target: C }, { source: B, target: D }, { source: C, target: D }, ], }, layout: { type: antv-dagre, rankdir: TB, // 从上至下布局 align: UL, // 节点对齐到左上角 nodesep: 50, // 节点间距 ranksep: 50, // 层间距 controlPoints: false, // 是否保留边的控制点 }, }); graph.render();仓库中的官方演示用例 layout-antv-dagre-flow.ts 展示了更完整的组合配合rect节点、polyline折线边、endArrow箭头以及drag-element、drag-canvas、zoom-canvas交互行为并显式开启controlPoints: true来获得折线边的平滑控制点const graph new Graph({ autoFit: view, data, node: { type: rect, style: { size: [60, 30], radius: 8, labelFill: #fff, labelPlacement: center, labelText: (d) d.id, }, }, edge: { type: polyline, style: { radius: 20, endArrow: true, lineWidth: 2, stroke: #C2C8D5, }, }, layout: { type: antv-dagre, controlPoints: true, }, behaviors: [drag-element, drag-canvas, zoom-canvas], });配置项总览下表列出了antv-dagre的核心配置项与增强配置项更多 dagre 原生配置项可参考 dagre 官方文档的 Configuring the layout 章节属性描述类型默认值必选type布局类型antv-dagre-✓rankdir布局方向可选值TB|BT|LR|RLTBalign节点对齐方式可选值UL|UR|DL|DRULnodesep节点间距px。在 rankdir 为TB或BT时是节点的水平间距在 rankdir 为LR或RL时代表节点的竖直方向间距number50nodesepFunc节点间距px的回调函数优先级高于nodesep(d?: Node) number-ranksep层间距px。在 rankdir 为TB或BT时是竖直方向相邻层间距在 rankdir 为LR或RL时代表水平方向相邻层间距number50ranksepFunc层间距px的回调函数优先级高于ranksep(d?: Node) number-ranker为每个节点分配等级的算法共支持三种算法longest-path、tight-tree、network-simplexnetwork-simplex|tight-tree|longest-path-nodeSize统一指定或为每个节点指定节点大小用于占位与间距计算Size | ((nodeData: Node) Size)-controlPoints是否保留边的控制点仅在边配置中使用了内置折线type: polyline-edge时或任何将自定义消费了style.controlPoints字段作为控制点位置的边时生效booleanfalsebegin布局的左上角对齐位置[number, number] | [number, number, number]-sortByCombo同一层节点是否根据每个节点数据中的parentId进行排序以防止 Combo 重叠booleanfalseedgeLabelSpace是否为边的 label 预留位置booleantruenodeOrder同层节点顺序的参考数组存放节点 id 值string[]-radial是否基于dagre进行辐射布局boolean-focusNode关注的节点仅在radial为 true 时生效ID | Node | null-preset布局计算时参考的节点位置一般用于切换数据时保证重新布局的连续性NodeData[]-补充在 G6 中antv-dagre计算得到的控制点会被写入边的style.controlPoints。对应的 TypeScript 类型定义位于 layouts/types.tsAntVDagreLayout接口将BaseLayoutOptions与antv/layout的AntVDagreLayoutOptions合并type固定为antv-dagre。布局方向与对齐rankdir 与 alignrankdir布局方向DagreRankdirDefault:TB布局的方向。Ttop上Bbottom下Lleft左Rright右。TB从上至下布局BT从下至上布局LR从左至右布局RL从右至左布局。rankdir不仅决定了主方向还会直接影响nodesep与ranksep的语义见下文间距控制。例如组织结构图、纵向流程图适合TB而依赖关系链、横向管线适合LR。align节点对齐方式DagreAlignDefault:UL节点对齐方式。Uupper上Ddown下Lleft左Rright右。UL对齐到左上角UR对齐到右上角DL对齐到左下角DR对齐到右下角。align决定同一层级内节点之间的对齐基准在节点尺寸不一致时会影响整体布局的视觉平衡。间距控制nodesep / nodesepFunc / ranksep / ranksepFuncantv-dagre将间距拆分为层内节点间距与相邻层间距两个维度且每个维度都同时支持固定数值与回调函数两种形式。nodesep节点间距numberDefault:50节点间距px。在 rankdir 为TB或BT时是节点的水平间距在 rankdir 为LR或RL时代表节点的竖直方向间距。nodesepFunc拥有更高的优先级。nodesepFunc节点间距回调(d?: Node) number节点间距px的回调函数通过该参数可以对不同节点设置不同的节点间距。在 rankdir 为TB或BT时是节点的水平间距在 rankdir 为LR或RL时代表节点的竖直方向间距。优先级高于nodesep即若设置了nodesepFunc则nodesep不生效。layout: { type: antv-dagre, nodesepFunc: (d) (d.id A ? 120 : 40), // 按节点差异化间距 }ranksep层间距numberDefault:50层间距px。在 rankdir 为TB或BT时是竖直方向相邻层间距在 rankdir 为LR或RL时代表水平方向相邻层间距。ranksepFunc拥有更高的优先级。ranksepFunc层间距回调(d?: Node) number层间距px的回调函数。方向语义与ranksep相同优先级高于ranksep即若设置了ranksepFunc则ranksep不生效。分层算法rankernetwork-simplex|tight-tree|longest-path布局的模式为每个节点分配等级的算法共支持三种longest-path基于最长路径分配层级计算最快但层级总数通常偏多tight-tree紧致树形分层生成的层级更紧凑network-simplex网络单纯形法在保证层级最少的同时尽量贴近原始拓扑视觉效果更好计算开销相对更高dagre 默认采用此算法。节点尺寸与占位nodeSizeSize | ((nodeData: Node) Size)Default:undefined统一指定或为每个节点指定节点大小用于占位与间距计算防止节点重叠时的碰撞检测。既可以直接传一个统一的尺寸layout: { type: antv-dagre, nodeSize: [60, 30], // 统一尺寸 }也可以按节点数据动态返回layout: { type: antv-dagre, nodeSize: (nodeData) (nodeData.id A ? [80, 40] : [40, 24]), }布局算法会基于该尺寸为节点预留空间从而避免相邻节点在渲染时互相重叠。边的控制点controlPointsbooleanDefault:false是否保留边的控制点。仅在下述情况生效边配置中使用了内置折线type: polyline/polyline-edge任何自定义消费了style.controlPoints字段作为控制点位置的边。本质上就是给边数据增加了style.controlPoints。默认值为false此时布局只输出节点位置当边需要折线、正交路由等多段路径时应开启该选项layout: { type: antv-dagre, controlPoints: true, }从源码实现看G6 的布局适配层会把布局结果中的边路径点写入边的style见 layout.tslayout.forEachEdge((edge) { const style { controlPoints: edge.points || [] }; result.edges!.push({ id: String(edge.id), source: String(edge.source), target: String(edge.target), style }); });旧版1.x布局适配则通过layoutMapping2GraphData兼容两种字段antv-dagre返回controlPoints原生dagre返回points统一转换后写入style.controlPoints见 layout.ts。边的 Label 空间edgeLabelSpacebooleanDefault:true是否为边的 label 预留位置。该配置会直接影响布局算法是否在边的中间添加 dummy node当为true默认时算法会在边中点插入虚拟节点占位从而在边 label 处留出足够的空白避免 label 与节点或其他边重叠当为false时不预留空间布局更紧凑但边 label 可能与图形元素发生遮挡。如果你的图边密集且 label 较少可以关闭该选项换取更紧凑的布局反之边 label 较多时建议保持默认值。同层节点排序nodeOrderstring[]Default:undefined同层节点顺序的参考数组存放节点 id 值。若未指定则按照 dagre 本身机制排列同层节点顺序指定后同一层级内节点的左右或上下次序会优先遵循该数组中的 id 顺序常用于人工调整同一流程层内的展示顺序layout: { type: antv-dagre, nodeOrder: [C, B, D, A], // 控制同层节点的排列顺序 }Combo 场景sortByCombobooleanDefault:false同一层节点是否根据每个节点数据中的parentId进行排序以防止 Combo 重叠。建议在有 Combo 的情况下配置为true。从源码看G6 会依据sortByCombo判断是否为 Combo 布局见 layout.tsexport function isComboLayout(options: STDLayoutOptions) { const { type } options; if ([comboCombined, comboForce].includes(type)) return true; if (type antv-dagre options.sortByCombo) return true; return false; }仓库中的组合用例 layout-antv-dagre-flow-combo.ts 给出了带 Combo 的完整配置节点按combo字段着色、边使用cubic-vertical曲线、combo 使用rect类型布局开启sortByCombo: trueconst graph new Graph({ autoFit: view, data, node: { type: rect, style: { size: [60, 30], radius: 8, labelText: (d) d.id, labelPlacement: center, ports: [{ placement: top }, { placement: bottom }], }, palette: { field: (d) d.combo }, }, edge: { type: cubic-vertical, style: { endArrow: true } }, combo: { type: rect, style: { radius: 8, labelText: (d) d.id, lineDash: 0, collapsedLineDash: [5, 5], }, }, layout: { type: antv-dagre, ranksep: 50, nodesep: 5, sortByCombo: true, }, behaviors: [drag-element, drag-canvas, zoom-canvas, collapse-expand], });辐射布局变体radial 与 focusNoderadialboolean是否基于dagre进行辐射布局。开启后布局结果不再呈严格的横向/纵向层次而是以某个中心节点为焦点向外辐射展开适合展示以单个节点为中心的关系结构。focusNodeID | Node | null关注的节点仅在radial为true时生效ID节点 idNode节点实例null取消关注。布局连续性与初始位置preset 与 beginpresetOutNode[]Default:undefined布局计算时参考的节点位置。一般用于切换数据时保证重新布局的连续性。在 G6 中若是更新数据则会自动使用已存在的布局结果数据作为输入从而避免每次布局都从零计算导致的位置跳变。begin[number, number] | [number, number, number]Default:undefined布局的左上角对齐位置可传入二维或三维坐标用于控制整个布局在画布中的起始锚点。源码级原理G6 如何接入 antv/layoutantv-dagre本身由antv/layout2.x见 package.json 中antv/layout: ^2.0.0依赖提供G6 通过一个通用的layoutAdapter将其适配为自己的布局基类见 layout.ts核心链路如下注册在 build-in.ts 中将antv-dagre映射到AntVDagreLayout类数据转换graphData2LayoutModel将 G6 的GraphData转换为布局可消费的模型combos会并入nodes一起参与布局见 layout.ts选项归一化transformOptions为布局提供默认的node、edge访问器——节点默认读取style.x / style.y / style.z与combo字段作为parentIdcombo 节点会打上isCombo标记见 layout.ts结果回写getLayoutResult遍历布局产出的节点与边将x / y / z / size写回节点style将edge.points写回边的style.controlPoints见 layout.ts。因此你在配置层看到的所有增强项nodeOrder、edgeLabelSpace、sortByCombo、radial等都是由antv/layout的AntVDagreLayout在 dagre 算法之上实现的G6 只负责配置透传与结果回写。该配置方式同样通过了类型与运行时测试的验证见 layout.spec.ts。布局适用场景流程图适合展示流程图节点之间的方向和间距会自动处理依赖关系图展示软件包或模块之间的依赖关系任务调度图展示任务之间的依赖关系和执行顺序。在这三类场景中antv-dagre都能自动完成层级划分、同层排序与间距计算开发者只需关注数据与样式无需手工计算坐标。延伸阅读以下仓库内文档可以帮助你更好地理解 Dagre 布局及其与 G6 布局体系的关系原生 Dagre 布局 DagreLayoutantv-dagre的旧版对应布局可对比两者的配置差异布局总览 overviewG6 全部内置布局的能力地图与选型参考布局基类 BaseLayout了解preLayout、nodeFilter、enableWorker等所有布局共用的基础配置自定义布局 custom-layout当内置布局无法满足需求时如何注册自己的布局。赞分享数据可视化前端图表库【免费下载链接】G6♾ A Graph Visualization Framework in JavaScript.项目地址https://gitcode.com/gh_mirrors/g6/G6点击查看免费下载相关推荐G6 AntvDagre 层次布局完整指南从 dagre 增强到流程图实战配置G6 AntvDagre 层次布局完整指南从 dagre 增强到流程图实战配置 导读 本文围绕 G6 内置的 antv dagre 布局展开它是对经典 da数据可视化前端图表库G6 Dagre 层次化布局实战指南配置项全解析与源码原理G6 Dagre 层次化布局实战指南配置项全解析与源码原理 Dagre 是 G6 内置的层次化布局方案专为有向无环图DAG设计能自动计算节点层级、方向数据可视化前端图表库G6 布局 API 完全指南setLayout / getLayout / layout / stopLayout 与布局配置实战G6 布局 API 完全指南setLayout / getLayout / layout / stopLayout 与布局配置实战 G6 antv/g6数据可视化前端图表库创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考