I am a newbie to javascript and D3.js

I am working with the Force Directed Graph Example at

I need to get a reference to the bound data of the clicked circle element so that I can add a link to it.

I have the following line of code in the circle's click handler:

d3.select(this).each(function(d){console.log(d)});

I am able to print the object to console but I can't figure out how to get a reference to this object so that I can push it into a link object like:

{source: <reference to node should go here>, target: some_other_node}

Appreciate your help guys!

I am a newbie to javascript and D3.js

I am working with the Force Directed Graph Example at https://gist.github./4062045

I need to get a reference to the bound data of the clicked circle element so that I can add a link to it.

I have the following line of code in the circle's click handler:

d3.select(this).each(function(d){console.log(d)});

I am able to print the object to console but I can't figure out how to get a reference to this object so that I can push it into a link object like:

{source: <reference to node should go here>, target: some_other_node}

Appreciate your help guys!

• javascript
• d3.js
• force-layout

3 Answers 3

circles.on('click', datum => {
  console.log(datum); // the datum for the clicked circle
});

# selection.on(typenames[, listener[, capture]])

When a specified event is dispatched on a selected node, the specified listener will be evaluated for each selected element, being passed the current datum (d), the current index (i), and the current group (nodes), with this as the current DOM element.

For the benefit of other newbies out there, this is how I solved this:

//Register the event handler with you selection
myselection.on("click", click);

//Obtain reference to data of currently clicked element by obtaining the first argument of      the event handler function

function click(element){ 
    console.log(element); 
}

Here is my solution:

/* CSS used in Javascript snippet */
.source { 
  stroke-width: 3px !important;
  stroke-opacity: 1;
  stroke: #0f0;
}

.target { 
  stroke-width: 3px !important;
  stroke-opacity: 1;
  stroke: #f00;
}


// this goes inside the d3.json call
node.on("mouseover", function() {
  idx = this.__data__.index
  for (i = 0; i < graph.links.length; i++) {
    if (graph.links[i].source.index == idx) {
      link[0][i].classList.add("source");
    }
    else if (graph.links[i].target.index == idx) {
      link[0][i].classList.add("target");
    }
    else {
      link[0][i].classList.remove("source");
      link[0][i].classList.remove("target");
    }
  }
});

The idea is, on the trigering of a given event, you will look through the list of links, and highlight (add a class) to each one whose source or target matches the index found in a given node's data . It likely isn't doing everything d3 is capable of doing, but it doesn't require extra libraries and I'm getting fast highlighting of my source/target links.