之前只用过echarts做过统计图表，文档还算熟悉。这次需要使用antv/g6做关系图，之前没使用过，但是有小伙伴已经安装了@antv/g6 3.1.1，并写了简单的demo，后续由我来做，但遇到了一些问题，如版本问题，polyline快点问题，添加同级节点问题。好在最后通过升级版本，添加同级节点，创建自定义边解决了问题。
官方文档：g6.antv.antgroup.com/manual/gett…
demo完整代码：code.juejin.cn/pen/7401782…
核心问题
影响到需求开发的一些问题
1、版本问题
问题描述
由于最开始使用3.1.1的版本，导致了一下问题
- 查询文档极慢，国内镜像504
- 部分功能不可用，如combo；更改状态后节点的字体颜色
- 没有向下兼容，节点形状在3.1.1版本是shape，4.8.21改为type
解决方案
升级版本至4.8.21
目前@antv/g6最高是5.0.13，官方文档的版本是4.8.21，使用的是3.1.1。所以推荐4.8.21，方便查阅文档
2、polyline拐点问题
对应的issue：github.com/antvis/G6/i…
问题描述
当使用polyline作为边时，可能由于节点大小、层间距、子节点数量等原因，导致绘制的path拐点不一致。虽然拐点的位置虽然可以通过offset更改，但拐点位置确实很难控制，也不能解决这个问题。
解决方案
自定义边，计算拐点的位置。这里是将拐点设置在1/2处。
3、添加同级节点问题
问题描述
dagre层次布局只能在一个方向（竖直/水平），无法在竖直排序时，直接往右侧添加节点。
直接添加数据会使额外节点和节点3-1、节点3-2同级。
解决方案
动态添加节点。获取指定节点的x、y，新建一个隐藏节点，设置右侧连接线锚点，将需添加的节点动态添加到隐藏节点上。
如果有多个，可能和其他部分重叠，需动态更改后续节点的y值，防止重叠。
零散问题
修改一些影响体验的问题
1、图未完全居中
实例化时，给画布的宽高和容器的宽高不一致导致。
2、缩放
缩放值的范围默认是0.02~10，可能存在缩放过大或过小的问题。可通过设置minZoom、maxZoom
{
// ...
// 根据实际情况设置
minZoom: 0.1,
maxZoom: 5,
}
自定义功能
可能会用到的工具栏
1、居中
直接调用实例方法。
graph.fitView(undefined, undefined, true, {
duration: 100
})
2、Resize
每次resize都更新画布大小
window.addEventListener('resize', () => {
onResize()
})
function onResize() {
let width = document.querySelector('#g6-container').clientWidth
let height
if(document.fullscreenElement) {
height = window.innerHeight
} else {
height = 600
}
graph.changeSize(width, height)
graph.render()
}
3、全屏
function fullScreenG6() {
const fullEl = document.querySelector('.app-container')
if(document.fullscreenElement) {
document.exitFullscreen()
} else {
fullEl.requestFullscreen()
}
}
4、放大/缩小
function onZoom(num) {
const zoom = graph.getZoom()
graph.zoomTo(zoom + num, {
x: window.innerWidth / 2,
y: window.innerHeight / 2
}, true, {
duration: 100
})
}
