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

Question

我在 svg 上绘制了 rect 和 text。

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

我将鼠标点击事件添加到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; });

Answer 1

您可以将样式附加到文本以忽略鼠标事件。 Here is the example:

风格:

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