AntV G6中动态数据提示框的实现_antv-g6弹窗-程序员宅基地
技术标签： css html5 elementui 前端 vue.js
背景
最近在做一个大屏项目，由于项目需求，需要在AntV G6生成的拓扑图中，展示每个节点的相关数据，但是官方对于这种功能的实现，目前只提供了一个tooltip插件方案。效果如下
问题
但是此插件只能通过鼠标点击和鼠标移入事件触发，并且同一时间只能展示一个节点的提示框，最重要的是，该提示框的数据是在绘制前就定义好的，不能像vue中的dom节点一样根据数据变动自动刷新。
解决方案
考虑到需要动态刷新数据节点、要同时存在多个提示框并且方便灵活配置，我最后想到的解决方案如下：找到每个节点的坐标->然后使用v-for循环生成提示框->使用css定位提示框
在此之前可先了解一下g6中三种坐标系（屏幕坐标、canvas坐标、绘制坐标）之间的转换关系。
1.我们在绘制图像时，我们取的是鼠标点击处的canvas坐标作为节点的坐标数据源的
因此，我们可以先获取到每个节点的canvas坐标
2.我的项目中，为了视觉友好，使用了g6的fitView方法，让图像自适应canvas画布显示，在此过程中会涉及到绘制坐标系的平移和伸缩，在默认情况下（无平移和伸缩）canvas坐标和绘制坐标是相等的，但是图像伸缩平移后，我们在第一步中获取到的坐标就不能够直接使用了，我们需要的是伸缩变换后节点的canvas坐标。
官方并没有提供获取图像当前canvas坐标的api，所以我们需要想别的办法来得到图像变换后节点的canvas坐标
获取图像变换节点后的canvas坐标
(1)通过查阅官方文档，我发现官方提供了一个获取当前图像中心渲染坐标getGraphCenterPoint，和获取图像缩放比例的方法getZoom。所以可以在调用fitView方法之前获取到原始图像的中心渲染坐标
(2)在调用fitView方法之后，获取到变换后的渲染中心坐标
(3)接着获取图像渲染坐标系的伸缩比例
（4）计算中心坐标在不发生坐标系平移时的理论坐标值
（5）计算中心坐标偏移量
（6）根据缩放比例、坐标系偏移量和节点的原始canvas坐标计算出节点的当前canvas坐标
（7）因为canvas坐标的原点是容器dom的左上角，所以我们可以使用css的absolute定位，然后将定位的按照物设置为canvas的容器dom元素，这样，我们刚才计算出来的节点坐标就可以用来当做提示框相对于容器元素的偏移量了。
（8）使用v-for动态生成提示框dom元素，并且设置位置
最终效果
核心思路
此方案的核心是要弄明白G6中三种坐标系之间的关系，然后根据图像缩放比例，和中心坐标的变换来推算出我们需要的坐标信息。
智能推荐
MQ的概念和RabbitMQ知识点（无代码）-程序员宅基地
文章浏览阅读1.2w次，点赞7次，收藏76次。MQ全称是MessageQueue(消息队列），是保存消息在传输过程中的一种容器，既是存储消息的一种中间件。多是应用在分布式系统中进行通信的第三方中间件，如下图所示，发送方成为生产者，接收方称为消费者。............_mq
如何做好Bug分析-程序员宅基地
文章浏览阅读1.5k次，点赞47次，收藏18次。Bug分析是QA的一项主要技能，需要针对项目中遇到的经典问题进行分类分析， 直达问题本质。 并且能够给团队其他项目或者成员起到典型的借鉴作用。 当然也有一些非常经典的问题可以进行技术深挖， 以供参考。 个人认为比较典型的「Bug分析」是stackoverflow， 当然， 一个完善的bug分析库， 可以进行问题分类总结。 对于测试新人是有很大的帮助的。本质上， 在测试领域很多问题是可重现可整理可规避的。另外， bug分析本身是为了拓宽每个人的认知边界， 缩小团队间的乔哈里窗以达到最佳的合作状态。一个「好的B
H5020NL PULSE 50PIN千兆四口网络变压器 HQST H85001S建议IC配置型号_4口网络变压器-程序员宅基地
文章浏览阅读800次。HQST导读：PULSE普思是网络通讯行业中龙头企业之一，其中网络变压器产品大都由国内代工厂代为生产，H5020NLHX5020NL千兆四口网络变压器是普思公司经典老牌产品，相对整个市场用量不是很大，集中生产约一月20万颗左右……PULSE普思是网络通讯行业中龙头企业之一，其中网络变压器产品大都由国内代工厂代为生产，H5020NLHX5020NL千兆四口网络变压器是普思公司经典老牌产品，相对整个市场用量不是很大，集中生产约一月20万颗左右，……PULSE H5020NL千兆网络变压器对应HQS._4口网络变压器
D20 EME 支持2k MAC地址表-程序员宅基地
文章浏览阅读242次，点赞3次，收藏9次。交换机，壳体采用镀锌钢板，结构紧凑，支持八个百兆端口，可配置一至四个百兆光纤端口。两路冗余电源设计，支持4pin可插拔端子，交直流通用，同时提供电源防接保护及过压、欠压保护，极大提升产品工作的稳定性。2.支持两路冗余电源设计，4pin可插拔端子，支持12～36V宽电压输入，交直流通用，同时提供电源防反接保护及过压、欠压保护，极大提升产品工作的稳定性。4.-40℃～75℃工作温度，-40～85℃存储温度，在极端气象条件下也能安全运行。8.支持IEEE802.3，IEEE802.3u，IEEE802.3x。
阿昌教你如何使用通义灵码-程序员宅基地
文章浏览阅读946次。Hi，我是阿昌，今天教你如何使用通义灵码。_通义灵码
老版本NDK下载列表（Android官网）_ndk 老颁布-程序员宅基地
文章浏览阅读2.3w次。我们在开发或编译旧版本NDK项目时，需要使用一些老版本的NDK，在这里提供了旧版NDK的列表及下载链接_ndk 老颁布
随便推点
网关、安全网关？与防火墙的区别(2)，网络安全多线程断点续传-程序员宅基地
文章浏览阅读640次，点赞6次，收藏18次。网关是一个大的概念，没有特指是什么设备，很多设备都可以做网关，普通的PC机也能做，常用的网关设备是路由器。网关的作用主要是用来连接两个不同的网络，比如可以连接两个IP地址不相同的网络，或连接两个操作系统不同的网络，如WINDOWS与LINUX互连，或连接两个网络协议不同的网络，如TCP/IP与IPX.或拓扑结构不同的网络，如以太网和令牌环网。总之网关是一种中间媒介。而防火墙也可以做网关，但它的主要做用只是用来防病毒或防黑客，网关只算是防火墙的一个功能。网关与防火墙的区别。
解决：ModuleNotFoundError: No module named ‘pymysql’_modulenotfounderror: no module named 'pymysql-程序员宅基地
文章浏览阅读4.1k次，点赞42次，收藏34次。背景在使用之前的代码时，报错： Traceback (most recent call last): File "xxx", line xx, in import pymysql ModuleNotFoundError: No module named 'pymysql'翻译：```追溯（最近一次通话）：文件“xxx”，第xx行，在导入pymysqlModuleNotFoundError:没有名为“pymysql”的模块```原因 ......_modulenotfounderror: no module named 'pymysql
android读取生成excel,Android创建与读取Excel-程序员宅基地
文章浏览阅读275次。1 import java.io.File;23 import java.io.IOException;45 import java.util.Locale;6789 import jxl.CellView;1011 import jxl.Workbook;1213 import jxl.WorkbookSettings;1415 import jxl.format.UnderlineStyle;..._android excel生成读取类
VS2015离线安装 安装包损坏或丢失_vs2015离线版csdn-程序员宅基地
文章浏览阅读4.3w次，点赞16次，收藏126次。1、去微软官网下载完成ISO镜像，最好不要在线安装，打开官方链接 https://www.visualstudio.com/zh-cn/downloads/download-visual-studio-vs.aspx按下图操作：2、用虚拟光驱加载，或者直接右键解压。在安装前，先安装两个证书。亲测，安装后，减少了很多“安装包损坏或丢失”的现象。两证书下载地址链接: https:/..._vs2015离线版csdn
解决vue中安装postcss-pxtorem插件，报错“ Error: PostCSS plugin postcss-pxtorem requires PostCSS 8.”_error: postcss plugin postcss-import requires post-程序员宅基地
文章浏览阅读2k次，点赞4次，收藏3次。目前 postcss-pxtorem 版本最高6.0.0,报这个错是因为插件版本太高，降成5.1.1可解决这个报错解决方法：分两步1.执行npm uninstall post-pxtorem2.执行npm i [email protected]_error: postcss plugin postcss-import requires postcss 8.
Linux-ARM开发_linux arm开发-程序员宅基地
文章浏览阅读787次。Linux-ARM开发_linux arm开发