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

【问题标题】：d3 How to trigger event on the object behind textd3 如何在文本后面的对象上触发事件
【发布时间】：2014-11-06 14:14:48
【问题描述】：

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

【问题讨论】：

为什么不在文本元素上设置相同的点击处理程序？
其实，在我的例子中，文本有数据（真正的问题要复杂得多），每个矩形都有自己的数据，所以当你点击function (d) { alert("text") ; } d 不同，谢谢。

标签： javascript svg d3.js mouseevent

【解决方案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; });

【讨论】：

优秀的解决方案。谢谢。

【解决方案2】：

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

【讨论】：

谢谢，实际上，在我的情况下，来自 text 和 bar 的数据是不同的。所以很难组合成一个组。