D3过渡条形图

Question

我用d3制作了一个条形图。当鼠标位于条形图上时，其颜色会发生变化，当鼠标移出时，颜色会变回原始颜色。我试图为它添加过渡效果：d3.select（this）.transition（）。duration（25）.classed（＆＃34; highlight＆＃34;，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");
            });