nvd3.js:无法使用svg中的数据点绑定onClick事件

Question

我正在尝试将数据点与onclick事件绑定,以便我可以显示带有一些其他详细信息和链接的覆盖框.我正在使用.nv-point该类访问数据点.问题是我无法将onclick事件注册到这些数据点.

这是代码:

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

这是jsFiddle中的演示

Answer 1

您可以轻松地将点击处理程序附加到"circle"或lineChart上的节点,如下所示:

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

在上面的示例中,这将显示Key(行)和您单击的节点的确切x值.我发现在警报线上设置断点非常有用,并使用Chrome/FF/etc开发人员工具检查e对象,以便您可以准确查看可用的数据以及如何访问它.

Answer 2

经过多次讨论后,这似乎对我有用:

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

基本上,我所做的和你最初尝试的之间的区别只是重置覆盖样式表以打开指针事件,即样式("指针事件","所有").

Answer 3

线图是用 svg 线制作的，它具有 nv-line 类。原始 jsFiddle 的一个分支在这里：http ://jsfiddle.net/pnavarrc/qzwkn/1/

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

如果您想看一下 nvd3 的源代码：