D3 전환 막대 차트

Question

d3을 사용하여 막 대형 차트를 만들었습니다. 마우스가 바 위에있을 때 색상이 바뀌고 마우스가 꺼지면 색상이 원래대로 바뀝니다. 전환 효과를 추가하려고합니다 : d3.select (this) .transition(). duration (25) .classed ("highlight", false); 그러나이 doesnt 일. 색상은 변경되지만 마우스가 꺼지면 원본으로 돌아 가지 않습니다. 왜 그런지 알아?

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