背景
技术栈： Vue3 、 Antd Vue 、AntV X6
需求：数据驱动流程图自动布局
大部分问题都可以在这篇文章看到；www.yuque.com/sxd_panda/a…
记录一下开发过程中得一些问题点
问题点
样式切换卡顿
这个其实跟 X6 无关。只是单纯的重绘和重排引起的。主要发生在元素很多的情况下会引起卡顿的情况；
X6 用的是 SVG 。那么问题点就会变成 SVG 会引起重排吗。问一下 AI 就知道了。
如果元素的几何属性改了。可能就会造成重排。如果节点多的情况下。可以减少这部分的操作。
Safari 兼容性问题
这个问题其实也跟 X6 无关。主要是 Safari 对 SVG 的某些属性不支持。
这里是 Safari 对 SVG 的一些样式限制
解决方案只能是绕开以上限制去做布局。
自动布局问题
先来看看最终的布局效果
一些资料显示 X6 有实现自动布局，那按照官网的文档走
对应搜索出来的结果： x6.antv.antgroup.com/temp/layout
根据文档走的话，就会发现，基本对不上
一开始就报错
Uncaught (in promise) TypeError: gridLayout.layout is not a function
往 node_modules 包 看看源码。就会发现。压根本没有这个方法。
但是发现有个 execute 函数方法，且第一个参数为 Graph，应该跟 X6 的 Graph 一致， 那直接传进去应该是可以的。然后就会发现又有新的错误
Uncaught (in promise) TypeError: graph.getAllNodes is not a function
在 X6 的 1.0 和 2.0 版本中都找不到 getAllNodes 这个方法。发现 layout 包也是基于 dagreJS去做封装, 那尝试一下绕开 layout 包直接用 dagreJS这个方案。
恰巧在 X6 2.0 的 图标示例 中发现也是直接用 dagreJS 进行自动布局。
根据 dagreJS 提供的文档。结合需求调整一下就可以出来效果了。需要注意的是。设置路径点需要自己做计算。这里主要是要取边的中点。然后再去设置路径点。就可以实现最终效果了。
x 轴：节点宽度 + 边的中点位置
y 轴：源节点 和 目标节点的中点位置
阅读扩展
- dagre 布局算法 : www.yuque.com/antv/g6-blo…
