d3如何在文本后面的对象上触发事件

d3 How to trigger event on the object behind text

本文关键字：对象 事件 文本 d3      更新时间：2023-09-26

我在svg上画了一个rect和text。

为了显示text，我首先渲染rect。

我将mouse click event添加到rect

当我点击文本时，似乎没有选择矩形，因为矩形在文本后面，所以首先选择文本。

我需要选择在rect内部单击鼠标时触发事件。

我该怎么办？

谢谢！

Fiddle

你可以看到，当你用鼠标点击文本时，矩形并没有被点击。

var data = ["TEXT SAMPLE TEXT SAMPLE TEXT SAMPLE"];
var svg = d3.select("svg");
var bar = svg.selectAll("g")
    .data(data)
  .enter().append("g")
    .attr("transform", function(d, i) { return "translate(100,100)"; });
bar.append("rect")
    .attr("width", 200)
    .attr("height", 50)
    .style("fill", "#f00")
    .on("click", function (d) {
                            alert("text");
                    });
bar.append("text")
    .attr("x", 10)
    .attr("y", 25)
    .attr("dy", "-.35em")
    .text(function(d) { return d; });

您可以将样式附加到文本以忽略鼠标事件。以下是示例：

样式：

.bar-text {
    pointer-events: none;
}

修改代码：

bar.append("text")
    .attr("x", 10)
    .attr("y", 25)
    .attr("class", "bar-text") // add class
    .attr("dy", "-.35em")
    .text(function(d) { return d; });

将处理程序附加到g元素。在此处完成演示。

相关文章：