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);
        }
});

使用setInterval在d3中重复转换

1 个答案: