vis---vue实现network节点圆环形工具栏项功能

实现效果图：

当鼠标点击节点时，出现圆环选项，具备删除节点和编辑节点功能，点击删除icon可实现删除节点功能，点击编辑icon可实现编辑节点功能。

解决思路：

（1）圆环形工具栏实现：关键在于定位，当点击节点时，使用【this.network.getPositions(e.nodes[0])】获取鼠标点击的位置；使用【this.network.getScale()】获取缩放尺寸；【this.network.canvasToDOM({x: p[nodeId]["x"],  y: p[nodeId]["y"] })】canvas->dom 坐标转化；

（2）当缩放、拖动节点、编辑节点、删除节点完成等情况需隐藏圆环形工具栏；

（3）删除节点【this.network.deleteSelected();】

（4）动态编辑节点：当编辑节点信息完成后需使用更改后的数据重新渲染生成网络拓扑图

完整代码：

 

参考文章：使用vis-network根据节点坐标定位环形工具栏