0

次のコードでは、データセット内の値に対応する 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'

これを機能させる方法についてのアイデアはありますか？私はどんな解決策にもオープンです。特定の値を下回った場合にバーがパルスするようにしたいだけです。ありがとうございました。

4

1 に答える 1

2

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);
        }
});
于 2013-06-24T14:11:21.803 に答える