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在更新布局时无法切回特定布局，后来发现是无法切换回实例化时的布局，可在切换布局时先destroyLayout()销毁布局，再updateLayout()更新布局

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

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

7、g6图形样式属性实际是对应canvas中的fillStyle属性

// 线性渐变：l代表线性渐变色，(0)表示渐变角度，0:#ffffff表示起始色为#ffffff，0.5:#7ec2f3表示中间色为#7ec2f3，1:#1890ff表示结束渐变色为#1890ff
fill: 'l(0) 0:#ffffff 0.5:#7ec2f3 1:#1890ff'

// 环形渐变：r代表环形渐变，（0.5,0.5,0.1）分别表示开始坐标的x,y和渐变半径，0:#ffffff表示起始色为#ffffff，1:#1890ff表示结束渐变色为#1890ff
fill: 'r(0.5, 0.5, 0.1) 0:#ffffff 1:#1890ff'