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

您不能转换布尔值。 要实现所需的功能，请显式设置Highlight类的样式，例如

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