衝突過渡

Question

今天我來給你另一個D3.js問題。

我有一個簡單的柱狀圖。 當鼠標懸停一個欄時，會在其上顯示一個字符串。 今天早上，我添加了一個新的轉換，改變了欄的背景顏色。

現在，問題如下： 如果更改background-color的.transition位於顯示字符串的位置下方，則只有背景色會更改，否則不顯示該字符串。 如果顯示字符串的.transition位於改變背景顏色的下方，則只會顯示字符串，而不會更改顏色。

這裏有一個的jsfiddle：http://jsfiddle.net/QbGRE/1/

d3.selectAll("div.bar") 
     .on("mouseover", function(d) { 
      d3.select(this) 
      .transition().duration(300) 
      .style("background-color", "#EE3B3B"); 
     }) 
     .on("mouseout", function(d) { 
      d3.select(this) 
      .transition().duration(300) 
      .style("background-color", "DarkRed"); 
     }); 

    d3.selectAll("div.line") 
     .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(); 
     }); 

謝謝大家的幫助，D3-精明的人

Answer 1

這樣做的原因是，你連接鼠標事件處理兩次，後來者改寫較早的那些。所以，首先你要附加的一個，增加了文字，再後來你要附加改變顏色取代了第一之一。

解決這個問題的最簡單的方法，就是去做你想在一個地方上的鼠標事件所做的一切：

.on("mouseover", function(d) { 
     d3.select(this) 
     .append("text").style("pointer-events", "none") 
     .text(function(d){return d.occurrence + " occurences";}); 

     d3.select(this) 
      .transition().duration(300) 
      .style("background-color", "#EE3B3B"); 
    }) 
    .on("mouseout", function(d) { 
     d3.select(this) 
     .select("text").remove(); 

     d3.select(this) 
      .transition().duration(300) 
      .style("background-color", "DarkRed"); 
    }); 

完整的示例here。另外，您也可以使用不同的命名空間的事件處理程序：

.on("mouseover.text", function(d) { 
    // etc 
}); 

.on("mouseover.color", function(d) { 
    // etc 
}); 

完整的示例here。