CODEWITHSUNDEEP
javascriptvis.js
user2660409
user2660409

Reputation: 85

How to retrieve edge value/label in vis.js?

I am manipulating nodes and edges after graph generated.I wanted to retrieve the edges value or title during double click on edges.

nodes = [{id: 'TEST1',  value: 0, label: 'TEST1', title: TEST1'},
         {id: 'engine',  value: 0, label: 'engine', title: 'engine'}];

  // create connections between people
  // value corresponds with the amount of contact between two people
   edges = [{from: 'TEST1', to: 'engine', value: 4, title: '4 Connections'},];

I am able to get the value of node during double click on nodes with the following code.

network.on( 'doubleClick', function(properties) {
         alert('clicked node ' + properties.nodes[0]);
});

How to retrieve the value of edges?

Upvotes: 0

Views: 4686

Answers (3)

Rhalp Darren Cabrera
Rhalp Darren Cabrera

Reputation: 966

HOW TO RETRIEVE EDGE / NODES PROPERTIES IN VIS.JS WHEN USING DOUBLE CLICK EVENT

To properly identify single node, single edge, or node with an edge

when the event is doubleClick you can use try this.

 network.on('doubleClick', function(properties) {


    var nodeIDs = properties.nodes;
    clickedNodes = nodes.get(nodeIDs);

    var edgesIDs = properties.edges;
    clickedEdges = edges.get(edgesIDs);

    var clickedType = 0;
    if (typeof clickedEdges != "undefined" &&
        clickedEdges != null &&
        clickedEdges.length != null &&
        clickedEdges.length > 0) {

        console.log("Edge:" + clickedEdges);
        clickedType = 2;

    }

    if (typeof clickedNodes != "undefined" &&
        clickedNodes != null &&
        clickedNodes.length != null &&
        clickedNodes.length > 0) {

        console.log("Node:" + clickedNodes);
        clickedType++;
    }
    //NODE ONLY
    if (clickedType == 1 ) {
      
        console.log(clickedNodes[0].id);
        //Do you Jquery here for Nodes
    }
    //EDGE ONLY
    if (clickedType == 2) {
       
        console.log(clickedEdges[0].id);
        console.log(clickedEdges[0].label);
         //Do you Jquery here for Edge

    };
    //NODE WITH EDGE
    if (clickedType == 3) {
        alert("single node or with edge ");
        console.log(clickedNodes[0].id);
        console.log(clickedEdges[0].id);
        //Do you Jquery here for Nodes
    }


});

on your object, you can add whatever additional property key/name and used them.

clickedNodes[0].id;
clickedNodes[0].device;

clickedEdges[0].id;
clickedNodes[0].ipaddress;

Upvotes: 1

Wiktor Zychla
Wiktor Zychla

Reputation: 48230

On the contrary to the answer stating that your edges should have explicit ids to be findable, they just don't have to.

You should just use the DataSet's get method to find the element by it's id, it works for internal ids, too.

network.on( 'doubleClick', function(properties) {

     // selected edge id
     var edgeId = properties.edges[0];

     // find corresponding edge
     var edge = edges.get( edgeId );

     if ( edge ) {

        // found one!
        var from = edge.from;
        var   to = edge.to;

     }
});

Upvotes: 0

Jos de Jong
Jos de Jong

Reputation: 6809

The events like doubleClick provide you a list with the id's of edges. If your edges don't have an id, Network generates one for them internally, but you will not be able to match them in your original data.

Best is to create your data in a DataSet, and give the edges an id:

var nodes = new vis.DataSet([
  {id: 'TEST1',  value: 0, label: 'TEST1', title: 'TEST1'},
  {id: 'engine',  value: 0, label: 'engine', title: 'engine'}
]);

var edges = new vis.DataSet([
  {id: 1, from: 'TEST1', to: 'engine', value: 4, title: '4 Connections'}
]);

network.on( 'doubleClick', function(properties) {
  var nodeIds = properties.nodes;
  console.log('node ids:', nodeIds);
  console.log('nodes:', nodes.get(nodeIds));

  var edgeIds = properties.edges;
  console.log('edge ids:', edgeIds);
  console.log('edges:', edges.get(edgeIds));
});

Upvotes: 0

Related Questions