动态添加边 visjs

Question

谁能帮我在这个 visjs 网络中动态添加边？实际上，我正在尝试使用拖放将节点添加到 canvas，但是当我单击该节点并将边动态添加到 canvas.[=10 上存在的另一个节点时，我需要帮助添加边=]

Answer 1

您可以使用 vis.js 'update' 函数动态添加节点或边。您只需传入一个数组，其中包含您要添加的一组节点或边。你可以这样称呼它：

nodes.update(updateNodesArray)

或

edges.update(updateEdgesArray)

其中节点和边是您最初为网络创建的 vis.DataSet 个实例。

可以在 https://visjs.github.io/vis-data/data/dataset.html

找到完整的文档

Answer 2

检查来自 visjs 的这个例子。 http://visjs.org/examples/network/other/manipulation.html

您可以通过如下配置您的网络来自定义 adding\editing\deleting 的方式：

manipulation: {
        enabled: false,
          addNode: function (data, callback) {
              // filling in the popup DOM elements
              console.log('add', data);
          },
          editNode: function (data, callback) {
              // filling in the popup DOM elements
              console.log('edit', data);
          },
          addEdge: function (data, callback) {
              console.log('add edge', data);
              if (data.from == data.to) {
                  var r = confirm("Do you want to connect the node to itself?");
                  if (r === true) {
                      callback(data);
                  }
              }
              else {
                  callback(data);
              }
          }
      }

Answer 3

这个答案的目的是帮助我自己停止谷歌搜索，因为我显然一直忘记解决方案，并总是先在这里结束...

从技术上讲，这也是对问题的回答：

function AddEdge(from_id, to_id)
{
    network.body.data.edges.add([{from: from_id, to: to_id}])
}

它的工作原理是网络数据节点是一个 vis 数据集，更新它（也通过 add/remove 方法）也会更新渲染。

Answer 4

var network = new vis.Network(container, datas, options)
//And then
network.addEdgeMode();

您可以通过拖放创建边

动态添加边 visjs

Add Edge Dynamically visjs

vis.js