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

我在svg上绘制了A rect和text。d3如何在文本后面的对象上触发事件

为了显示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; });

来源

2014-11-06 yongnan

你为什么不只是设置文本元素在同一个单击处理？ – 2014-11-06 14:18:59

实际上，在我的情况下，文本有数据（真正的问题非常复杂），并且每个矩形都有它自己的数据，所以当你点击函数（d）时，alert（“text”）; } d是不同的，谢谢。 – yongnan 2014-11-06 14:21:54

您可以将样式附加到文本以忽略鼠标事件。

风格：

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

来源

2014-11-06 14:27:21 Peter

谢谢，这是我想要的。 – yongnan 2014-11-06 14:32:42

优秀的解决方案。谢谢。 – robline 2017-10-27 19:21:15

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

来源

2014-11-06 14:25:00

感谢，实际上，在我的情况下，来自文本和栏的数据是不同的。所以很难组合成一个组。 – yongnan 2014-11-06 14:33:42

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

回答

相关问题