nvd3.js : unable to bind onClick event with the da

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

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.

Answer 2

The line plot is made with svg lines, which have class nv-line. A fork of your original jsFiddle is here: http://jsfiddle.net/pnavarrc/qzwkn/1/

d3.selectAll(".nv-line").on("click", function () {
    alert("clicked");
});

If you feel like having a look at the source code of nvd3:

• https://github.com/novus/nvd3/blob/master/src/models/lineChart.js
• https://github.com/novus/nvd3/blob/master/src/models/line.js

Answer 3

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 4

You could just add the argument, that will link it to the data point. In my case, I was trying to hyperlink for each data point. The arguments has value passed, which can be used to update hyperlink as per requirement.

d3.selectAll(".nv-point").on("click", function (e) {    

alert(e[0].values[0]);
});