animation - 使用 setInterval 在 d3 中重复转换

Question

在下面的代码中，我只有 5 个条形图对应于它们在数据集中的值。使用 .each 和 setInterval，如果数据集中的相应值小于 3，我试图让条形填充颜色反复从黑色过渡到红色。

<script type="text/javascript">

var w=500;
var h = 100;
dataset = [1,2,3,4,5];

var svg = d3.select("body")
.append("svg")
        .attr("width",w)
        .attr("height",h);

    svg.selectAll("rect")
        .data(dataset)
        .enter()
        .append("rect")
        .attr("y", 0)
        .attr("x", function(d,i){ return i*21;})
        .attr("width",20)
        .attr("height",function(d){return d*10;})
        .each(function(d){
            if (d<3) {
                setInterval(function(){d3.select(this)
                    .attr("fill","black")
                    .transition()
                    .duration(1000)
                    .attr("fill","red")},1000);
            }
        });


    </script>

当我运行此代码时，我收到错误：

Uncaught TypeError: Object [object global] has no method 'setAttribute'

关于如何使这项工作的任何想法？我对任何解决方案持开放态度，我只想拥有它，这样如果条形图低于某个值，它就会跳动。谢谢你。

Answer 1

该this变量在新上下文中不会具有相同的值。以下代码应该可以工作。

.each(function(d){
        var that = this;
        if (d<3) {
            setInterval(function(){d3.select(that)
                .attr("fill","black")
                .transition()
                .duration(1000)
                .attr("fill","red")},1000);
        }
});