[英]d3 How to trigger event on the object behind text
我在 svg 上绘制了一个rect
和text
。
为了显示text
,我先渲染rect
。
我将mouse click event
添加到rect
当我单击文本时,似乎没有选择 rect,因为 rect 在文本后面,所以首先选择了文本。
当鼠标在rect
内单击时,我需要选择触发事件。
我应该怎么做?
谢谢!
你可以看到,当你鼠标点击文本时,矩形没有被点击。
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
元素。 在这里完成演示。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.