乐趣区

关于前端:Antv-G6minimap更新渲染问题

问题景象

在应用 antv g6 进行力导向图表时,应用了 minimap 插件。思考性能晋升,设置 type 为 delegate,只有渲染大抵图形就行了。然而在渲染不同数据的状况下,会发现应该是绿色线然而却显示红色。如图:

重要代码如下:

 const minimap = new G6.Minimap({size: [200, 150],
        type: 'delegate' // 只渲染图上元素的大抵图形,以升高渲染老本
      })

this.graph = new G6.Graph({
        container: 'container',
        plugins: [minimap],
....

查看了源码局部:

源码解释

在渲染 minimap 线的时候,走了一个判断—— 如果这条线存在 minimap 数组中,则间接获取 path 渲染,不存在则从 graph.data 里获取并减少。

从这个判断来看,会不会是 minimap 中的线和 graph.data 里的线填充色不统一导致的?确认这个查找方向是正确的,最终起因居然是后端!

谬误起因

后端在第一次渲染时曾经给了这些线,它们的状态都是 down,前端渲染为红色;第二次渲染时,又给了这些线,然而状态都是 up,也就是绿色。因为刚刚提到的判断逻辑,最终暴露出了这个问题!!!!

谬误方向

一开始只想着怎么去解决这个问题,尝试“先把 minimap 销毁后再更新”的思路,没有思考为什么会这样。不过起初查问了 github issue,只找到了销毁 minimap 插件的办法,没有找到销毁后如何从新再加载进来的办法。如果有大神晓得,求告知~~~


销毁 minimap 的 issue——
github issue:https://github.com/antvis/G6/…

退出移动版