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中三种坐标系之间的关系，然后根据图像缩放比例，和中心坐标的变换来推算出我们需要的坐标信息。

本文链接：https://blog.csdn.net/zhuo123110/article/details/121656004

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

webpack打包原理 ? 看完这篇你就懂了 !_webpack打包原理说的通俗易懂-程序员宅基地

文章浏览阅读3.9k次，点赞12次，收藏126次。前言[实践系列] 主要是让我们通过实践去加深对一些原理的理解。[实践系列]前端路由[实践系列]Babel 原理[实践系列]实践这一次,彻底搞懂浏览器缓存机制[实践系列]你能手写一个 Promise 吗？Yes I promise。有兴趣的同学可以关注[实践系列]。求 star 求 follow~本文通过实现一个简单 webpack,来理解它的打包原理,看完不懂直接..._webpack打包原理说的通俗易懂

Unity让一辆越野车沿着指定路径自动行驶（非手动操作）

通过wheelCollider组件让汽车沿着指定路径行驶，到达翻山越岭的操作，这里的汽车并非手动驾驶而是自动驾驶

【C语言】贪吃蛇【附源码】

C语言贪吃蛇、最新版贪吃蛇

免费的ChatGPT网站（10个）

几款国内能用的免费的gpt（AI）工具推荐

BZOJ 1432: [ZJOI2009]Function【找规律_bzoj function-程序员宅基地

文章浏览阅读1.2k次。…………代码…………就几行然而…………感觉有点烧脑2333其实是可以找规律直接艹过去的【数据范围感人23333【嗯………………考虑一下，显然可以上下翻转，于是对于求f[k]( k>(n/2))的，等效于求f[n-k]，所以只要保证对于某个n，前(n>>1)层的值最小即可考虑一下…………当n==1，答案是1当n==2，答案是2之后每次增加一条线，都不会影响前k层的值，但是_bzoj function

SpringMVC入门

SpringMVC执行流程和组件分析

随便推点

什么时候用List、Set或Map（Java中的集合框架体系）_业务开发什么时候使用list-程序员宅基地

文章浏览阅读2.3k次，点赞15次，收藏42次。集合框架体系集合是Java中提供的一种容器，可以用来存储多个数据;而由于存储的方式不同，就形成了很多不同的体系结构，统称为集合框架体系。归为两大类 : Conllection 和 Map Collection List ArrayList 1、排序有序，可重复 2、底层使用数组 3、查询快......_业务开发什么时候使用list

高频面试题：Java程序占用 CPU 过高怎么排查，2024年最新高级java开发工程师面试题-程序员宅基地

文章浏览阅读726次，点赞12次，收藏19次。在面试前我整理归纳了一些面试学习资料，文中结合我的朋友同学面试美团滴滴这类大厂的资料及案例由于篇幅限制，文档的详解资料太全面，细节内容太多，所以只把部分知识点截图出来粗略的介绍，每个小节点里面都有更细化的内容！大家看完有什么不懂的可以在下方留言讨论也可以关注。网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。需要这份系统化的资料的朋友，可以添加V获取：vip1024b （备注Java）一个人可以走的很快，但一群人才能走的更远！