Question

我在svg上绘制了rect和text。

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

我将mouse click event添加到rect

当我单击文本时，似乎未选中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; });

Answer 2

将处理程序附加到g元素。完整演示here。

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

2 个答案: