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"); 
      });