antv系列图引擎X6、G6比对选择，并实现vue实例ER图

一、概述

X6是基于svg，G6是基于canvas

1、svg 支持事件处理器，而 canvas 不支持事件处理器。（使用canvas实现事件操作较麻烦一些）
2、canvas 适合图像密集型的游戏，频繁地重绘图像，svg 绘制的复杂度高时减慢渲染的速度。（大数据量渲染时选择canvas）
总之：主要是这两点的，虽然本身做ER图，应该选择X6的，但是由于大数据渲染的，只能两者均衡使用G6

二、ER图实例

官方ER图实例

官方实例有表内滚动，但是有点bug（连接不会跟着字段走），所以去掉了。

按照实例代码改成vue初始化的

这里就比较简单，直接在mounted生命周期初始化，不在created，是因为无法获取到DOM#container

自定义工具区

官方示例中是(使用 String 自定义 ToolBar 功能)
但是，看了文档，我们还可以使用使用 DOM 自定义 ToolBar 功能

// 工具栏
    const toolbar = new G6.ToolBar({
      className: 'g6-component-toolbar',
      getContent: () => {
        // 渲染自定义节点---组件
        const outEl = document.getElementById('toolbar')
        return outEl

      },
      position: { x: 10, y: 10 },
    });
1
2
3
4
5
6
7
8
9
10
11

拖动节点延迟严重

issues#2986中提到，并给出问题所在，如果不需要可以选择去掉

自定义edge连线

官方示例注册的自定义边dice-er-edge没有提供连线，所以我们如果有需要则得在draw(cfg, group)方法中自己定义连线中途的图形制作

自定义Minimap

new G6.Minimap()默认宽高[200,150]

自定义布局

onLayout() {
      // 更新布局
      const grid = {
        type: 'grid',
        begin: [20, 20],
        preventOverlap: true // 防止重叠
      }
      // const dagre = {
      //   type: 'dagre',
      //   rankdir: 'LR',
      //   align: 'UL',
      //   controlPoints: true,
      //   nodesepFunc: () => 0.2,
      //   ranksepFunc: () => 0.5,
      // }
      this.graph.updateLayout(grid)
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

自定义鼠标滚轮事件

• 直接滚轮：上下滚动
• alt+滚轮：放大缩小

scorll(e) {
        const x = e.clientX
        const y = e.clientY
        if (e.altKey) {
          if (e.wheelDelta > 0) {
            this.graph.zoom(1.5, { x, y })
          } else {
            this.graph.zoom(0.5, { x, y })
          }
        } else {
          this.graph.translate(0, e.wheelDelta < 0 ? -100 : 100);
        }

      }
1
2
3
4
5
6
7
8
9
10
11
12
13
14

最后

代码放在了码云(learn-antv-g6: antv/g6的vue实现实例 (gitee.com))，后续还会更新一些其他g6的vue实现