Add Edge Dynamically visjs

Question

Can anyone help me with adding edges dynamically in this visjs network? Actually, I am trying to use drag and drop to add nodes to the canvas, but I need help adding edges when I click the node and add edge dynamically to another node existing on canvas.

Porche

Answer 1

You can use the vis.js 'update' function to add either nodes or edges dinamycally. You simply pass in an array with the set of either nodes or edges that you are trying to add. You call it like this:

nodes.update(updateNodesArray)

OR

edges.update(updateEdgesArray)

where nodes and edges are the vis.DataSet instances that you originally created for the network.

Full docs can be found at https://visjs.github.io/vis-data/data/dataset.html

Macfarlane

Answer 2

The intention of this answer is to help my self stop googling it, as I apparently keeps forgetting the solution, and keeps ending up here first...

It is also technically an answer to the question:

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

It works as the network data node is a vis dataset, and updating it (also via the add/remove methods) will update the render as well.

Aruwimi

Answer 3

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

You can create edges on drag & drop

Greengrocer

Answer 4

check this example from visjs. http://visjs.org/examples/network/other/manipulation.html

you can custom the way of adding\editing\deleting by configure your network as follow:

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);
              }
          }
      }

Unstep

What he asking is to create egdes on drag and drop. – Savour

he want to go in edit mode by clicking the node instead of clicking toolbar. – Savour

The above example is showing the option of adding edges by d&d, by entering to edit mode (click the edit button) (could be by using vis function). and then entering to add Edge mode (could be by using vis function). only then vis allows you to drag an edge from one node to another. this will show the edge dragging animation and by drop, it will enter to the function you can customise in the vis option manipulation section (as I mentioned above). Hope this is more clear now. – Unstep

could you please show me how to do it without clicking edit button ? instead directly click node and drop over other to create edge – Savour

#48062247 paste your plunker here so i can accept your answer thank you so much cheers. – Savour