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

【问题标题】：Get click event from SVG bounding box using d3js使用 d3js 从 SVG 边界框获取点击事件
【发布时间】：2015-08-06 12:06:58
【问题描述】：

我正在尝试添加鼠标单击事件侦听器来单击 SVG 元素边界框上的事件（在本例中为“测量”类的所有元素）。我认为应该起作用的是：

 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));
 });

see JSFiddle

不幸的是，只有在实际绘制的元素上的鼠标点击被注册，空白被忽略。

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

【问题讨论】：

标签： javascript d3.js svg

【解决方案1】：

您无法检测到对 d3 中不存在的元素的点击。

如果你想检测你的边界框，你需要创建一个形状相同的新元素（例如：<polygon>），使其不可见并将其添加到你要收听的组中。

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

【讨论】：

谢谢。不是我希望的答案，但非常有帮助。
对不起，我不能帮助你更多，你想直接听选择的边界框的事件吗？因为我真的认为这在 d3 中是不可能的。
我设法制作了覆盖层，现在能够对边界框点击做出反应。非常感谢您的帮助！
很高兴能帮上忙，编码愉快！ :)

【解决方案2】：

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

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

完整演示 here。要获取被点击的元素，可以使用d3.event.target (https://jsfiddle.net/78hLhugh/3/)。

【讨论】：

感谢您的努力，但这样我就没有得到我点击的实际元素。我不需要鼠标位置，这只是为了最小化我在问题中的代码示例。
那么你应该首先说 - 你可以使用d3.event.target 来获取实际元素，请参阅我的更新答案。