javascript - 一页上有多个 svg 的 D3 单击事件

Question

我有一个网页，其中有两个通过 D3.js 插入的 svg。我可以将点击事件添加到 svg，我已将其直接附加到正文。但是，我在第一个 svg 上方有另一个“ float ”div，我在其中附加了另一个 svg。尝试添加点击事件时，它们不会触发。

我也尝试过跟踪鼠标位置，但这也只适用于附加到主体的 svg。

有没有办法将点击监听器分配给“ float ”div 内的 rect？

我这里有 fiddle :JsFiddle

我正在尝试，当单击页面顶部的 rect 时，将颜色从黑色更改为白色，反之亦然。怎么可能？

我也尝试过 Jquery 方法..

请注意，如果您将鼠标移到第二个 svg 上，您实际上可以拖放和缩放第一个 svg，这也是不需要的行为。

Answer 1

这是一个更新的工作 JsFiddle它使用类切换来达到预期的效果。 JS的相关部分在这里:

  d3.selectAll(".controlBarButton")
    .classed("white",function(d,i){return rule[i] === "none"})
    .on("click",function(){
       d3.select(this).classed("white",!d3.select(this).classed("white"));
    });

我还在第 68 行和第 79 行注释掉了以前的样式设置为白色。我根据切换 white 类添加了设置黑色和白色填充的 css 规则，并删除了 pointer-events:无 阻止控制栏上所有鼠标事件的css 规则。