问题描述:用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实现复杂网状关系图显示