为什么当我使用 vis-network.js 动态添加边时，图形会消失？

Question

奇怪的是我在我的vue项目中使用vis-network.js，动态添加边时图形消失了。

但动态更新和删除不会。

然后我写了一个测试页面从https://visjs.github.io/vis-network/standalone/umd/vis-network.min.js引入vis-network.js，然后发现没问题！

那么从NPM下载的vis-network有问题吗？

有人可以帮我吗？

我如何使用：

npm install vis-network


import vis from 'vis-network/dist/vis-network'
Vue.prototype.$vis = vis;


var nodes = new this.$vis.DataSet([
  {id: 1, label: 'Node 1'},
  {id: 2, label: 'Node 2'},
  {id: 3, label: 'Node 3'},
  {id: 4, label: 'Node 4'},
  {id: 5, label: 'Node 5'}
]);
var edges = new this.$vis.DataSet([
  {from: 1, to: 3},
  {from: 1, to: 2},
  {from: 2, to: 4},
  {from: 2, to: 5},
  {from: 3, to: 3}
]);
var data = {
  nodes: nodes,
  edges: edges
};
var container = document.getElementById("id");
var options = {};

this.graph = new this.$vis.Network(container, data, options);
nodes.add([{id:8, label:"Node 8"}]);  // normal
edges.add([{from:1 ,to:5}]);  // Graphics disappear

Answer 1

我也花了一整天的时间来解决这个确切的问题，但最后，我终于偶然发现了https://github.com/almende/vis/issues/2567

这个问题有一个非常透彻的解释，但是 TL;DR: vis 的构建方式如果将网络放入 vue 组件数据中根本无法工作。

不过，它可以将边和节点 DataSet 放入组件数据中，因此请保留对它们的引用，并在不将其附加到 vue 组件的情况下初始化网络。