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

see JSFiddle

不幸的是，只有鼠标点击实际绘制的元素，才会忽略空格。

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

Answer 1

您无法在d3中检测到任何现有元素的点击次数。

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

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

Answer 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/）。

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

2 个答案: