对比了目前的一些topo插件，最终还是选择了antv-g6，两个原因：
1.G6上手难度适中，灵活性很高，各种节点动画的自定义很好，而且和整个阿里开源生态是打通的，包括阿里图标库
2.阿里这些年开源的很多东西品质都不错，维护的也很好（PS：自从马云金沙江论坛演讲后，现在网上到处都在网爆阿里，说互联网没什么技术含量，这种论调让人心痛）
G6的使用 先上个图
这个图包含一下几个功能：
1.点击node，再点到另一个node，可以进行连线
这个功能是在modes里面通过create-edge设置的。G6有预制的模式，只需要在modes里面配置即可，而且模式支持扩展，例如
如果使用默认的模式这么写：
` {
type: 'drag-canvas'
},`
如果要加一些自己的限制，例如相同的起点和终点不支持连线，可以在预制的回调事件加以下限制 ` {
type: 'create-edge',
shouldBegin: (e) => {
this.startPoint = e.target.cfg.parent.cfg.id
return true
},
shouldEnd: (e) => {
// 禁止重复连线
return e.target.cfg.parent.cfg.id !== this.startPoint
}
} `
2.自定义节点使用阿里图标库
首先引入阿里图标库的字体样式import '@/assets/icons/iconfont.css'
然后使用G6.registerNode('iconfontAAA',draw(){
group.addShape('text', {
attrs: {
x: 0,
y: 0,
fontFamily: 'iconfont', // 对应css里面的font-family: "iconfont";
textAlign: 'center',
textBaseline: 'middle',
text: cfg.text,
fontSize: 60,
fill: cfg.fill
},
name: 'icon-svg'
})
})自定义节点
其中iconfontAAA就是自定义节点的类型，在创建节点的数据中设置type:iconfontAAA即可。有一点需要注意其中字体的text是阿里图标库编码前面加\u转义`text = '\ue619'`
3.还有包括右键这些事件`graph.on('edge:contextmenu'`,之类的就不在赘述了。
最后附上代码地址（欢迎拍砖，多拍拍长得快）
https://github.com/luokerenGIT/vue-g6
