CODEWITHSUNDEEP
javascriptjsond3.jsgraph
Dani
Dani

Reputation: 21

D3.JS: How to get nodes of corresponding link (edge)

I've just started using D3 for my webapplication to visualize a graph. My edges and nodes are clickable. The nodes send the user to a table containing information about the node when doubleclicked. I would like to do the same with the edges so when clicked. I would like to retrieve the corresponding nodes to that edge,so that i could send that information to another script.

So technically what i would like to know is how to retrieve the name of the nodes corresponding to the edge. E.g. node A is connected to node B. How do i retrieve that node information when clicked on the edge (link)? The output should be the values A and B. I've looked through everything and i'm not able to find any information on this.

My edges and node information is in a JSON file 

d3.dataset = {
    "nodes":[
        {"name":"heart problems","group":"1"},
        {"name":"acetic acid","group":"3"},
        {"name":"alzheimers","group":"1"},
        {"name":"bipolar","group":"1"},
        {"name":"ebola","group":"1"},
        {"name":"vaccinium myrtillus","group":"2"},
        {"name":"adamantane","group":"3"},
        {"name":"fluorene","group":"3"}
    ],
    "links":[
        {"source":3,"target":1,"value":20},
        {"source":3,"target":6,"value":20},
        {"source":3,"target":7,"value":9},
        {"source":0,"target":1,"value":19},
        {"source":0,"target":6,"value":1},
        {"source":2,"target":1,"value":20},
        {"source":2,"target":6,"value":20},
        {"source":2,"target":7,"value":5},
        {"source":4,"target":1,"value":2},
        {"source":4,"target":6,"value":3},
        {"source":2,"target":5,"value":2},
        {"source":5,"target":1,"value":2}
    ]
}

SOLUTION, thank you for the answer i feel so stupid... i forgot to use the d in the function :)

This is the function now, the clickonEdgeEvent function passes the values on to my HTML

var clickOnEdge =  svg.selectAll(".link").on("dblclick", function(d){
d3.select(this).attr('r', 8)
.style("fill","lightcoral")
.style("stroke","red")
clickonEdgeEvent((d.source.name),(d.target.name));
});

Thanks in advance for your help, Dani

Upvotes: 1

Views: 2502

Answers (1)

thatOneGuy
thatOneGuy

Reputation: 10642

So you just want to get the nodes that the edge is connected to ? This will work :

//take it you have an on click function
.on('click',function(d){
   var connectedNodes = nodes.filter(function(e){
      return e.id == d.source.id || e.id == d.target.id; //connected nodes
   })    
})

The above code will return nodes that match the source and target ID's of the link. If you link them another way, just change the filter :)

Implemented fiddle : https://jsfiddle.net/thatOneGuy/0nv4ck58/4/

I have mocked up a fiddle as an example. Instead of on click though I used mouseover. And instead of ID I needed to use Name. Just make sure in your situation you use a unique value to compare. Here is the main part :

 .on('mouseover', function(d) {
    console.log(d)
    var connectedNodes = node.filter(function(e) {
        return e.name == d.source.name || e.name == d.target.name; //connected nodes
      }).style('stroke', 'red')
      .attr('r', 15)
  })
  .on('mouseout', function(d) {
    console.log(d)
    var connectedNodes = node.filter(function(e) {
        return e.name == d.source.name || e.name == d.target.name; //connected nodes
      }).style('stroke', 'white')
      .attr('r', 5)
  })

In this example, on mouseover link the connected nodes will appear bigger and with a red border. Mouseout returns to normal :)

Upvotes: 4

Related Questions