D3 Transition Bar chart

Question

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?

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

You can't transition Boolean values. To achieve what you're looking for, set the style of the highlight class explicitly, eg

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