節點及其子節點中的鼠標事件處理

Question

我在我的svg容器中有一堆節點。每個節點都有兩個孩子：一個圓圈和一個文本標籤，以便標籤在圓圈內居中。

var nodes = d3.select("#main").selectAll("g.node"); 
var circles = nodes.append("circle"); 
var labels = nodes.append("text").style("text-anchor", "middle"); 

在鼠標懸停時，我執行一些額外的邏輯，例如，現在

nodes.on('mouseover', function() { 
    console.log('on mouse over'); 
}) 
.on('mouseout', function() { 
    console.log('on mouse out'); 
}); 

，問題是，很顯然，在節點中的鼠標事件及其子標籤分別處理：當我輸入與鼠標光標的圓圈，則觸發事件mouseover。然後，當我將光標移動到文本標籤上方時，突然觸發mouseover事件，就像光標離開圓圈並且另一個mouseover事件啓動一樣。

是否有可能「合併」節點及其子標籤的事件處理，以便在我仍懸停在圓內時懸停在文本上而不會啓動新的mouseover事件？

Answer 1

明白了：添加屬性pointer-events與價值none禁止鼠標事件：

var labels = nodes 
    .append("text").style("text-anchor", "middle") 
    .attr("pointer-events", "none");