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

Santiago

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.

Oneal

Answer 2

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").`

Passionless

This worked for me, but there isn't a way to configure this "pointer-events" behaviour? Because nv.3d is given the point the following class and style: .nv-noninteractive { pointer-events: none; } – Cephalalgia

Answer 3

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

Fructify

this works! but i don't want to add onclick to the whole line. just the datapoints. – Santiago

I see. The data points are represented as circle.nv-point elements, but you can't reach them with the mouse, because the lines are drawn over the circles, making impossible to click them. What are you trying to do? – Fructify

oh! what i'm trying to do is to display a overlay box with some more details and links on clicking a data point. – Santiago

I am search for the same kind of solution. The arguments passed to the onclick are not very helpful. Is there a page that describes onclick for different types of charts? – Cuttlebone

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]);
});

Sesquioxide