Question

我有一个带有点击事件的图表，它一直运行良好，直到我点击标签（组/固定标签）。在此之后，该事件不再起作用。

我已将此事件附加到我的页面：

d3.selectAll("rect.nv-bar").on("click", function (d) {
    alert("Clicked");
});

这是一个问题的小提琴： http://jsfiddle.net/ygQZW/

我做错了什么或者是某种错误？

- 更新 -

@explunit发布的解决方案解决了我50％的问题。现在，当我点击隐藏/显示条形图的颜色标签时，点击效果会在之前隐藏的条形图上停止。

这是更新的小提琴：http://jsfiddle.net/ygQZW/1/

我该如何解决这个问题？

Answer 1

如果您对点击处理程序进行命名空间，那么当图表发生变化时，NVD3不会使用其他任何内容覆盖它：

d3.selectAll("rect.nv-bar").on("click.mine", function (d) {
    alert("Clicked");
});

来自API：

要为同一事件类型注册多个侦听器，该类型后面可以跟一个可选的命名空间，例如“click.foo”和“click.bar”。

Answer 2

我自己解决了这个问题。

我没有使用d3.selectall，而是使用了jQuery选择器，并选择了父标记。在父标记中，我附加了一个悬停事件，它在子节点上启动另一个事件。

通过执行此操作，当隐藏条形图然后再次显示时，父标记事件会再次启动单击事件。

我的新代码：

$(".nv-group").on("hover", function(d) {
    $(".nv-bar").off("click"); // Remove previous events, if have
    $(".nv-bar").on("click", function(d) {
        alert("Clicked!");
    });
});

更新了jsFiddle：http://jsfiddle.net/ygQZW/4/

我认为这不是最佳和优雅的解决方案，如果有人有更好的解决方案请发布！

点击事件在交互后无效

2 个答案: