title: D3 Transition Bar chart
body: <p>I have made a bar chart using d3. When the mouse is over a bar, the color of it changes, and when the mouse is out, color changes back to original. I am trying to add a transition effect to it :d3.select(this).transition().duration(25).classed("highlight", false); However this doesnt work. The color changes but doesn't go back to original when mouse is out. Do you know why?</p>
  
  <pre><code>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);
                  });
  </code></pre>