AntV G6手记

1.G6 两节点间多边支持

G6默认是不支持多条边的，边类型采用quadratic类型最多也只能支持两条边，如果要支持多条变，可以采取官方文档：两节点间存在多条边 | G6的解决办法，文档提出的大概的意思就是采取quadratic边类型，然后控制弯曲度以显示更多的边。当然，也有傻瓜式的解决办法就是直接调用如下代码：

G6.Util.processParallelEdges(edges)

这是G6给出的处理多条变的工具函数，将自己的边集传进去，然后边类型选择quadratic即可。

2. 边id与节点id重复后不显示的问题

如果业务需要，在edges的对象中也需要带id字段（一般情况下edges对象只需要有source、target就可以了），那么edges的id字段值与nodes的id字段值不能重复，如果重复会有id字段值重复的边就不显示的情况发生。

3. 节点多选后，获取所选节点问题

G6中支持节点多选，节点多选的方法是在新建Graph设置model是将节点多选设置为多选：

const main_g6 = new Graph({
    //... 省略n行代码 ... 
    modes: {
        default: ['drag-canvas', 'zoom-canvas', 'drag-node', {
          type: 'click-select', // 节点可选
          trigger: 'ctrl' // 摁住Ctrl后可以多选
        }] // 允许拖拽画布、放缩画布、拖拽节点
      }
})

设置之后，我没有找到能通过何种方法能获取到我选择的多个节点，所以我采取了监听鼠标的点击事件，通过判断状态的方法来获取到我多选的节点的id集合。具体如下：

this.main_g6.on('node:click', (e) => {
      const { item } = e
      this.node_select = []
      if (!this.node_select_temp.includes(item)) {
        // 此处可以再优化，之后判断当前是点击节点的，并且节点为选中状态的才会新增到node_select_temp中
        this.node_select_temp.push(item)
      }
      this.node_select_temp.forEach(element => {
        if (element.hasState('selected')) {
          this.node_select.push(element.getModel().id)
        }
      })
    })

大概思路就是：通过一个数组记录我的历史选中记录，每次对选中记录遍历一遍，然后将state为selected的挑出来即可。还有优化的策略就是历史选中记录也保存id的集合，每次挑完之后，将挑完的新集合再赋值给历史记录的集合，我这里就是this.node_select_temp = this.node_select。