刪除鼠標事件上的文本

Question

一個小問題。 我有一個條形圖，我希望它在'mouseenter'行顯示一些文本。這工作正常，但我想刪除'mouseout'這個文本，我似乎無法得到它的竅門。

非常感謝您的幫助！ 附：d3.js腳本

d3.selectAll("div.line") 
     .append("div") 
     .attr("class","bar") 
     .style("width", function(d){return d.occurrence /10 + "px"}) 
     .on("mouseenter", function(d) { 
      d3.select(this) 
      .append("text") 
      .text(function(d){return d.occurrence + " occurences"}); 
     }) 
     .on("mouseout", function(d) { 
      d3.select(this) 
      .select(".text").remove(); 
     }); 

Answer 1

在你代碼，您正試圖在mouseout上選擇.text。您正在選擇具有類的節點：「文本」而不​​是文本節點。刪除點。

我可能也會更改鼠標「選擇」，以「選擇」，以防萬一你錯過了一個鼠標事件，並無意中添加兩個文本節點。

編輯：

http://jsfiddle.net/QbGRE/

d3.select("div.line").selectAll("div.bar") 
    .data(data, function(d) { return d.id;  }) 
    .enter() 
    .append("div").attr("class","bar") 
    .style("width", function(d){return d.occurrence /10 + "px";}) 
    .on("mouseover", function(d) { 
     d3.select(this) 
     .append("text").style("pointer-events", "none") 
     .text(function(d){return d.occurrence + " occurences";}); 
    }) 
    .on("mouseout", function(d) { 
     d3.select(this) 
     .select("text").remove(); 
    }); 

盪滌你的代碼。

1. 「鼠標懸停/鼠標移開」 而不是 「的mouseenter /鼠標移出」
2. 。選擇（ 「文本」），而不是 「的.text」。
3. 風格上的文字（「指針事件」，「無），以阻止它導致額外的鼠標事件時，它的加入。
4. 增加了假數據。

Answer 2

要做到這一點最簡單的方法的有關部分是由一個唯一的ID分配給新的文本元素並選擇：

.on("mouseenter", function(d) { 
     d3.select(this) 
     .append("text") 
     .attr("id", "myText") 
     .text(function(d){return d.occurrence + " occurences"}); 
    }) 
    .on("mouseout", function(d) { 
     d3.select("#myText").remove(); 
    });