nvd3.js : unable to bind onClick event with the data points in the svg

Question

I am trying to bind the datapoints with the onclick event, so that I could display a overlay box with some additional details and links. I'm using the .nv-point class to access the datapoints. The problem is that I'm unable to register the onclick event to those datapoints.

Here is the code :

d3.selectAll(".nv-point").on("click",function(){
    alert("clicked");
    //do something more
});

Here is the demo in jsFiddle

Answer 1

After much futzing around, this seems to work for me:

d3.select("#mainGraph svg").selectAll(".nv-point").style("pointer-events", "all").on("click", function( e ) { console.log( JSON.stringify( e ) ); });

Basically, the difference between what I've done and what you originally tries is just resetting overriding the stylesheet to turn on pointer-events, i.e. style("pointer-events", "all").`

Answer 2

You can easily attach a click handler to the "circle", or node point on a lineChart like this:

 chart.lines.dispatch.on('elementClick', function(e) {
     alert("You've clicked on " + e.series.key + " - " + e.point.x);
 });

In the above example, this will show the Key (of the line) and the exact x value of the node you've clicked on. I find it very helpful to set a breakpoint on the alert line, and using Chrome/FF/etc developer tools, inspect the thee object so you can see exactly what data is available and how to access it.