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

问题

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

回答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.

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

回答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

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

来源：https://stackoverflow.com/questions/16103244/nvd3-js-unable-to-bind-onclick-event-with-the-data-points-in-the-svg

标签

onclick

d3.js

nvd3.js