2

私はd3にかなり慣れていません。現時点では、データの配列に基づいて円を描くことができます-うわー-知っています:-)しかし、配列全体をアニメーション化しながら、一度に2つの円を描きたいと思います。配列に 1000 個の要素があり、1 と 2 を同時に描画し、次に 2 と 3、3 と 4 などを描画するとします。これにより、非常にきれいなアニメーションが得られるはずです :-) 関数 i index と exit().remove() を使用しましたが、これは機能しません。

これは私が持っているものです:

var w = 500;
        var h = 300;
        var padding = 20;

        var dataset = [
                        [5, 20], [480, 90], [250, 50], [100, 33], [330, 95],
                        [410, 12], [475, 44], [25, 67], [85, 21], [220, 88],
                        [600, 150]
                      ];

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

        //Create scale functions
        var xScale = d3.scale.linear()
            .domain([0, d3.max(dataset, function(d) { return d[0]; })])
            .range([padding, w - padding * 2]);

        var yScale = d3.scale.linear()
            .domain([0, d3.max(dataset, function(d) { return d[1]; })])
            .range([h - padding, padding]);

        //Create circles
        svg.selectAll("circle")
               .data(dataset.slice(0,2))
               .enter()
               .append("circle")
               .attr("cx", function(d) {
                    return xScale(d[0]);
               })
               .attr("cy", function(d) {
                    return yScale(d[1]);
               })
               .attr("r",10);

        for (var i=0; i<4;i++) {

            svg.selectAll("circle").data(dataset.slice(i,i+2)).transition().duration(2000).delay(2000)
            .attr("cx", function(d) {
                    return xScale(d[0]);
               })
               .attr("cy", function(d) {
                    return yScale(d[1]);
               })
               .attr("r", 10);
            //svg.selectAll("circle").data(dataset.slice(i,i+1)).exit().remove();
            console.log(dataset.slice(i,i+2));
        }

しかし、4 つではなく 1 つのアニメーションしか取得できません..うーん..何が問題なのですか?

4

2 に答える 2

1

遅延関数はコールバックを受け入れるため、選択を for ループでラップする必要はありません。

    .delay( function(d, i) { (2000*i); } )
于 2013-03-27T17:40:22.910 に答える
0

コードを見ると、固定期間 (2 秒) と固定遅延 (2 秒) があります。FOR ループは即座に実行されるため、4 つのアニメーションすべてが一度にキューに入れられ、おそらくすべて同時に再生されますが、(おそらく) データを再バインドしたため、最後のアニメーションのみが表示されます。

次のようなものを試してください：

svg.selectAll("circle")
   .delay( (2000*i) )
   .data(dataset.slice(i,i+2))
   .transition()
   .duration(2000)
   .attr("cx", function(d) {return xScale(d[0]);})
   .attr("cy", function(d) {return yScale(d[1]);})
   .attr("r", 10);)

遅延にアニメーション カウンターを掛けると、各アニメーションが相殺されます。最初に遅延を設定すると、アニメーションを開始する直前にデータがリバウンドされます (これにより、最初のアニメーションが実行される前に、最後のアニメーション ステップがデータを再バインドするのを停止します)。

于 2012-09-19T10:49:35.660 に答える