0

トランジションを無期限にチェーンする方法を見つけようとして、3時間以上探しました...

私の唯一の解決策は、コードを関数にラップしてから、 setInterval で関数を繰り返し呼び出すか、遷移の「終了」イベントを待つことです

1 つのライナーの例:

d3.selectAll('circle').data([1,2,3]).enter().append('circle').attr('cy':function(d){return d * 100},'cx':function(){Math.random() * window.innerWidth},'r':'10px')

//sets initial locations for circles that are created to match data array

.transition().attr('cy':function(){Math.random() * window.innerHeight},'cx':function(){Math.random() * window.innerWidth}})
.transition().attr('cy':function(){Math.random() * window.innerHeight},'cx':function(){Math.random() * window.innerWidth}})
.transition().attr('cy':function(){Math.random() * window.innerHeight},'cx':function(){Math.random() * window.innerWidth}})
.transition().attr('cy':function(){Math.random() * window.innerHeight},'cx':function(){Math.random() * window.innerWidth}})
.transition().attr('cy':function(){Math.random() * window.innerHeight},'cx':function(){Math.random() * window.innerWidth}})

//I'm looking for something that can repeat the transition without using setInterval)
4

1 に答える 1

0

いずれにせよ、トランジション設定を関数にラップして、再帰的に呼び出すことができるようにする必要があると思います。ただし、@Jon S. は正しく、別のタイマーの代わりにトランジションの「終了」イベントを使用できます。

複雑なのは、transition.each("end", callback)(メソッド名が示すように)のコールバック関数が配列内の各要素に対して呼び出されることです。簡単なチェックにより、再帰が最初の要素に対して 1 回だけ発生し、無期限に分岐しないことを確認できます。

例を次に示します: http://fiddle.jshell.net/UD9ng/1/

キーコード： 

var moving = false;

function move(selection) {

    moving = true;
    selection.transition().duration(5000).ease("sin-in-out")
        .attr("cx", function(){return Math.random()*width;})
        .attr("cy", function(){return Math.random()*height;})
        //.call(move); //stack overflow error!
        .each("end", function(d,i){ 
            if (!i) circles.call(move); //only run for i==0
        });

}

コメントからわかるように、トランジションの.call()メソッド (トランジション オブジェクト全体に対して関数を 1 回呼び出す) を使用してみましたが、現在、トランジションの最後までその呼び出しを遅らせる方法がないため、サブトランジションの呼び出しを繰り返しますコンソールがエラーを吐き出し、その背後に巨大なスタックトレースがあるまで、キューに追加されていました。奇妙なことに、キューに入れられたすべてのトランジションはまだスムーズに動いていたので、何も問題がないように見えましたが、最終的にはトランジションが不足していたはずです。

each/end アプローチ (元の選択に対して再帰関数が呼び出される) は、完了したトランジションにチェーンするのではなく、完了したトランジションを置き換えるため、リソースを消費することなく無期限に続行できます。

于 2014-01-19T03:43:56.560 に答える