共计 704 个字符,预计需要花费 2 分钟才能阅读完成。
问题景象 :
在应用 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/…
正文完