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如何在文本後面的對象上觸發事件

回答

相關問題