一、概述

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 },});

拖动节点延迟严重

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)}

自定义鼠标滚轮事件

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

scorll(e) {const x = e.clientXconst y = e.clientYif (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);}}

最后

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