Search code examples
javascriptvis.jsvis.js-network

vis.js beforeAddNode handler


I'm adding dynamically nodes and edges to my network. Before adding them I want to be sure they're not already present in the datasets. I'm not sure manipulation is the way, I can't see that console.logs when I add nodes/edges. http://visjs.org/docs/network/manipulation.html

manipulation: {
        enabled: false,
        addNode: function (data, callback) {
            console.log('add', data);
            callback(data);
        },
        editNode: function (data, callback) {
            console.log('edit', data);
            callback(data);
        },
        addEdge: function (data, callback) {
            console.log('add edge!', data);
            callback(data);
        }
}

Solution

  • i added a snippet to show you how you can do it.

    there is a boolean there you can change and see the effect.

    instead of this boolean you can run your function for checking if the node exist in the DataSet.

    // create an array with nodes
      var nodes = new 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'}
      ]);
    
      // create an array with edges
      var edges = new vis.DataSet([
        {from: 1, to: 3},
        {from: 1, to: 2},
        {from: 2, to: 4},
        {from: 2, to: 5}
      ]);
    
      // create a network
      var container = document.getElementById('mynetwork');
      var data = {
        nodes: nodes,
        edges: edges
      };
      var options = {
        manipulation: {
            enabled: false,
            addNode: function (data, callback) {
                console.log('add', data);
                var idExist = true; // you can change it to false to see addition
                if(idExist){
                  callback(null);
                  console.log('node exist!!!, not added');
                }
                else{
                  callback(data);
                }
            },
            editNode: function (data, callback) {
                console.log('edit', data);
                callback(data);
            },
            addEdge: function (data, callback) {
                console.log('add edge!', data);
                callback(data);
            }
        }
      };
      var network = new vis.Network(container, data, options);
      
      function addNode(){
        network.enableEditMode();
        network.addNodeMode();
        console.log('click on canvas to add node!');
      }
    
      
    #mynetwork {
          width: 600px;
          height: 400px;
          border: 1px solid lightgray;
        }
    
        p {
          max-width: 600px;
        }
    <!doctype html>
    <html>
    <head>
      <title>Network | Basic usage</title>
      <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vis/4.20.0/vis.min.js"></script>
      <link href="https://cdnjs.cloudflare.com/ajax/libs/vis/4.20.0/vis.min.css" rel="stylesheet" type="text/css"/>
    </head>
    <body>
    <button onclick="addNode()"> add node</button>
    <div id="mynetwork"></div>
    
    
    
    </body>
    </html>