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

我正在尝试添加一个鼠标点击事件监听器来点击 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

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

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

最佳答案

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

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

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

关于javascript - 使用 d3js 从 SVG 边界框获取点击事件，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31855331/