D3轉換條形圖

Question

我用d3製作了一個條形圖。當鼠標懸停在條上時，其顏色會發生變化，當鼠標移出時，顏色會變回原來的顏色。我試圖給它添加一個轉換效果：d3.select（this）.transition（）。duration（25）.classed（「highlight」，false）;然而這不起作用。當鼠標不在時，顏色會改變但不會回到原始狀態。你知道爲什麼嗎？

svg.selectAll("rect") 
       .data(teams) 
       .enter() 
       .append("rect") 
       .attr({ 
        //attributes 
       }) 
       .on("mouseover", function() { 
        d3.select(this).classed("highlight", true); 
       }) 
       .on("mouseout", function() { 
        d3.select(this).transition().duration(25).classed("highlight", false); 
       }); 

Answer 1

您不能轉換布爾值。爲了實現你要找的東西，請明確設置高亮類的樣式，例如

.on("mouseover", function() { 
       d3.select(this).transition().duration(25).style("fill", "red"); 
      }) 
      .on("mouseout", function() { 
       d3.select(this).transition().duration(25).style("fill", "black"); 
      });