使用d3js从SVG边界框获取点击事件

Question

我正在尝试为SVG元素的边界框（在此案例中，所有类名为“measure”的元素）上的单击事件添加鼠标单击事件监听器。

我认为应该起作用的代码如下：

 var vrvToolkit = new verovio.toolkit(); // www.verovio.org

 jQuery.ajax({
     url: "http://www.verovio.org/examples/downloads/Schubert_Lindenbaum.mei",
     success: function (data) {
         var svg = vrvToolkit.renderData(data + "\n", "");
         jQuery("#svg_output").html(svg);
     },
     async: false
 });

 d3.select("#svg_output svg").selectAll(".measure")
     .on("click", function () {
     jQuery("#log").text(d3.mouse(this));
 });

查看JSFiddle

很遗憾，只有在实际绘制的元素上才会注册鼠标点击事件，白色空间会被忽略。

有没有办法在特定的边界框内识别鼠标点击？

- sonovice

Answer 1

在d3中，您无法检测不存在的元素上的点击操作。

如果您想检测边界框，则需要创建一个具有相同形状（例如：<polygon>）的新元素，并将其设置为不可见，并将其添加到要侦听的组中。

通常人们会创建一个大的透明矩形。

- Robin Nicolet

---

谢谢。虽然不是我希望得到的答案，但非常有帮助。 - sonovice

抱歉我无法提供更多帮助，您是想直接监听选择框的事件吗？因为我真的不认为这在d3中是本地可行的。 - Robin Nicolet

我成功制作了我的覆盖层，并且现在能够对边界框点击做出反应。非常感谢您的帮助！ - sonovice

很高兴能够帮助，祝编码愉快! :) - Robin Nicolet

Answer 2

你所需要做的就是在整个SVG上添加click处理程序，而不是特定的元素：

d3.select("#svg_output svg")
  .on("click", function () {
  jQuery("#log").text(d3.mouse(this));
});

完整演示在这里。为了获取被点击的元素，你可以使用d3.event.target（https://jsfiddle.net/78hLhugh/3/）。

- Lars Kotthoff

---

感谢您的努力，但这种方法无法获取我实际点击的元素。我不需要鼠标位置，这只是为了在问题中使我的代码示例更简洁。 - sonovice

好的，你应该一开始就说了 -- 你可以使用 d3.event.target 来获取实际元素，看看我的更新答案。 - Lars Kotthoff