g6踩坑 - 爱码网

1. 当父元素有transform: scale()时，有鼠标定位不准确的问题

// 开启支持css缩放，智能保证基本的准确，很多情况还是有问题
graph.get('canvas').set('supportCSSTransform', true)

2. 图形分组总体居中对齐的问题

const matrix = [1, 0, 0, 0, 1, 0, 0, 0, 1]
const box = group.getCanvasBBox()

// 3*3 矩阵变换，用于二维渲染
const newMatrix = transform(matrix, [
    ['t', -box.width / 2, 60], // translate
    // ['r', Math.PI / 4], // rotate
    // ['s', 2, 0.5], // scale
])

group.setMatrix(newMatrix)

3、两个实体间不同方向的边会有交叉现象，解决方法，

// 配置边连入节点的中心
linkCenter: true,

// 箭头为自定义箭头
endArrow: {
   path: 'M 0,0 L 10,5 Q 7,0,10,-5 Z',
   d: -25,
},

// 上面为临时解决方法，另一种是计算连接点，箭头定义Wie函数式
vee: (width = 15, length = 20, d = 0) => {

const begin = d * 2

const path = `M ${begin},0 L ${begin + length},-${width / 2}

Q ${begin + (2 * length) / 3},0 ${begin + length},${width / 2} Z`

return path

}

4、g6在更新布局时无法切回特定布局，后来发现是无法切换回实例化时的布局

5、用changeData()方法更新数据会保留原来的样式，解决方法是先运行clear()

6、实例的方法如果达不到想要的效果，可以在实例化时覆盖相应的方法