nvd3.js：无法绑定onClick事件与svg中的数据点 [英] nvd3.js : unable to bind onClick event with the data points in the svg

问题描述

我试图绑定数据点与onclick事件，以便我可以显示一个覆盖框与一些额外的细节和链接。我使用 .nv-point 类来访问数据点。问题是我无法向这些数据点注册onclick事件。

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.

这里是代码：

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

这是 jsFiddle

推荐答案

圆形或节点点在一个lineChart上像这样：

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

在上面的例子中，这将显示Key（行的）您点击的节点。我发现在警报行上设置断点非常有用，并且使用Chrome / FF / etc开发工具检查 e 对象，以便您可以准确地看到什么数据可用以及如何访问它。

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.

这篇关于nvd3.js：无法绑定onClick事件与svg中的数据点的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！