setInterval的使用在D3中重复过渡 [英] repeating transitions in d3 using setInterval

问题描述

在以下code，我只是对应于其值数据集5个酒吧。随着。每次和setInterval，我想有从黑到红酒吧填充颜色过渡，如果反复在数据集中的相应值小于3。

In the following code, I just have 5 bars corresponding to their values in dataset. With .each and setInterval, I am trying to have the bar fill color transition from black to red repeatedly if the corresponding value in the dataset is less than 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>

当我运行这个code我得到的错误：

When I run this code I get the error:

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

如何使这项工作任何想法？我愿意接受任何解决方案，我只是想有这么一个栏将脉冲，如果它是在一定的价值。谢谢你。

any ideas on how to make this work? I am open to any solution, I just want to have it so that a bar will pulse if it is under a certain value. Thank you.

推荐答案

的这个变量将不会有新的上下文相同的值。下面code应该工作。

The this variable won't have the same value in the new context. The following code should work.

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

这篇关于setInterval的使用在D3中重复过渡的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！