vue---vis.js动态加载图谱之unshift踩坑记

问题描述：用vue做一个类似于如下图的neo4j的图谱管理系统，当每一次点击左侧标签时，往右侧搜索框下的顶部位置插入一个图。

解决方案：图谱数据通过数据驱动【 <div class="graph" v-for="(item ,index) in graphData" :key="item.index">...</div>】

当每一次点击左侧标签时，往右侧搜索框下的顶部位置插入一个图,即在graphData中顶部插入一条数据【this.graphData.unshift(data);】。

unshift() 方法可向数组的开头添加一个或更多元素，并返回新的长度。

问题来了，当插入数据后，上一次渲染的图不见了，原因是当往【graphData】unshift 添加一条数据时，dom结构中渲染的数据发生了变化，原先【graphData】中的第一条数据被顶到第二的位置，之前渲染图的数据发生了位置变动，所以图就不见了，如果是往【graphData】末尾添加数据则不存在这个问题。

解决方法很无奈，当每次插入一条数据，只能把图都重新渲染一遍。如果有好的方法，请各位大佬不吝赐教。

注意：每一个图对应一个Vis.NetWork实例，实例依次为networkArr[network0]、networkArr[network1]、networkArr[network2].....

这样才能为每一副图绑定单击、双击、hover等事件。

 

visjs使用见：vue---vis实现复杂网状关系图显示