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

【问题标题】：nvd3.js : unable to bind onClick event with the data points in the svgnvd3.js：无法将 onClick 事件与 svg 中的数据点绑定
【发布时间】：2013-04-12 18:22:32
【问题描述】：

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

代码如下：

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

这是jsFiddle中的演示

【问题讨论】：

标签： onclick d3.js nvd3.js

【解决方案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 对象，这样您就可以准确了解哪些数据可用以及如何访问它。

【讨论】：

【解决方案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")。`

【讨论】：

这对我有用，但没有办法配置这种“指针事件”行为？因为 nv.3d 被赋予了以下类和样式： .nv-noninteractive { pointer-events: none; }

【解决方案3】：

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

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

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

【讨论】：

这行得通！但我不想将 onclick 添加到整行。只是数据点。
我明白了。数据点表示为 circle.nv-point 元素，但您无法用鼠标到达它们，因为线是在圆圈上绘制的，因此无法单击它们。你想做什么？
哦！我要做的是显示一个覆盖框，其中包含更多详细信息和单击数据点的链接。
我正在寻找相同的解决方案。传递给 onclick 的参数不是很有帮助。是否有描述不同类型图表的 onclick 的页面？

【解决方案4】：

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

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

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

【讨论】：