Vue项目中使用AntV G6绘制自适应图谱

一、需求

• 需求1：Vue3.x项目下使用AntV G6绘制图谱

• 需求2：图谱节点为两个IP地址，节点间存在多条连线情况

• 需求3：鼠标悬浮到节点上方时，高亮当前节点并出现tooltip气泡提示，展示相关信息

• 需求4：点击图谱连线后需要高亮关联节点和当前连线

• 需求5：图谱大小需要保证自适应（这里可以是根据窗口自适应，也可以是可调整大小的弹窗DOM内的自适应，后续会分开实现）

二、实现

1.初始Vue3.x的项目可以看之前的博客：通过vite搭建Vue3.x项目，初始化项目后需要安装AntV G6的依赖，执行如下命令：

npm install --save @antv/g6

2.安装G6后在需要使用的页面进行导入，在创建好容器后利用G6进行实例化创建一个画布，后续的图谱绘制都将在画布内进行，目前为止需求1部分已经完成了，代码如下：

3.为了方便后续步骤的进行，这里先造一些节点和连线的数据，大致仿照 G6官网示例中的数据，根据需求2在模拟数据的边集中添加两个节点存在多条连线的情况（实际场景下根据实际数据做处理即可），如下：

4.创建好模拟数据后继续完善画布的配置，这时可以参考官网的Api对画布、节点样式、连线样式、气泡提示tooltip进行一些配置

• 这里需要注意的是，拖动画布或缩放画布时有概率出现**残影（拖影）**的问题，需要单独处理
• 利用G6的工具函数将连线类型设置为贝塞尔曲线就能保证两个节点之间多条连线不会出现重叠的问题，这样就实现了需求2的部分
• 需求3则利用G6实例化一个Tooltip后，再利用plugins字段配置到到画布内，当鼠标移入节点时会出现一个tooltip显示节点的IP地址（id），但是移出节点后tooltip并不会消失，需要在移出节点的事件中单独处理一次
• 需求4可以给节点添加一个点击事件，根据点击的节点信息找到关联的两个节点的IP地址（id）并进行高亮处理
• 代码如下：

5.需求5要分成两种情况来说

• 第一种情况是窗口大小改变时影响到画布，可以直接通过监听窗口window的resize来对画布进行自适应的操作，代码如下：

• 第二种情况就稍微复杂一些，笔者实际中的业务是在一个可以拖动改变大小的弹窗中实现画布自适应；同理这里可以是收起导航菜单影响到画布的DOM亦或是改变布局等方式影响了画布的DOM大小发生改变，总之就是画布所在的DOM元素大小发生改变时的自适应，因为不是window的大小改变，所以不能使用第一种监听window的resize方式来处理，笔者这里使用的是一个js库element-resize-detector用来监听画布的DOM大小是否改变，步骤如下：

  • 安装element-resize-detector库，详情：https://www.npmjs.com/package/element-resize-detector

  npm install --save element-resize-detector
  

  • 使用element-resize-detector监听目标DOM大小是否发生改变

6.最后在界面卸载时需要释放一次资源，将画布资源进行释放，代码如下：

7.最终效果如下图，方便学习代码demo会放到Gitee上，笔者根据需求5拆分出了两个示例，方便针对不同场景做不同的处理，仓库地址：g6_learning: Vue3+Elemet Plus+G6绘制自适应图谱demo (gitee.com)，CSDN资源地址：g6_learning: Vue3+Elemet Plus+G6绘制自适应图谱demo(csdn)