onclick - nvd3.js：无法将 onClick 事件与 svg 中的数据点绑定

Question

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

这是代码：

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

这是jsFiddle中的演示

Answer 1

您可以轻松地将单击处理程序附加到“圆”或 lineChart 上的节点点，如下所示：

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

在上面的示例中，这将显示（行的）键和您单击的节点的确切 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 ) ); });

基本上，我所做的与您最初尝试的区别只是重置覆盖样式表以打开指针事件，即 style("pointer-events", "all")。

Answer 3

线图由 svg 线制成，具有 nv-line 类。您原来的 jsFiddle 的一个分支在这里：http: //jsfiddle.net/pnavarrc/qzwkn/1/

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

如果你想看看 nvd3 的源代码：

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

Answer 4

您可以只添加参数，将其链接到数据点。就我而言，我试图为每个数据点建立超链接。参数已传递值，可用于根据要求更新超链接。

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

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