4

私はd3jsでトランジションを使用していますが、正常に動作します。ただし、オブジェクトの位置が更新されるたびに関数を起動する方法はありますか？（すべてのステップで）

ここにいくつかの偽のコードがあります：

obj.transition()
  .ease('quad')
  .durantion(250)
  .attr('cy', function(d) {
    return d*d;
   });

each（type、fn）を入れると、イベントを最後から始めまで取得できることを私は知っています。しかし、利用できるステップはありません。

obj.transition()
  .ease('quad')
  .duration(250)
  .attr('cy', function(d) {
    return d*d;
   })
  .each('start', function(d) { console.log('x'); });

これを行う方法はありますか？

4

1 に答える 1

4

ドキュメントからはtweens、すべてのステップで評価されているように聞こえます。

トランジションが実行されている間、そのトゥイーンは0から1の範囲のtの値で繰り返し呼び出されます。遅延と期間に加えて、トランジションはタイミングの制御を容易にします。緩和すると、スローインやスローアウトなどの時間が歪められます。一部のイージング関数は、一時的に1より大きいまたは0より小さいtの値を与える場合があります。ただし、終了時間は常に正確に1であるため、遷移が終了したときに終了値が正確に設定されます。遷移は、その遅延と期間の合計に基づいて終了します。遷移が終了すると、トゥイーンはt = 1で最後に呼び出され、終了イベントがディスパッチされます。

だから私はあなたが試すことができるのはtween多分このようなカスタム関数を追加することだと思います：

obj.transition()
 .tween("customTween", function() {
     console.log("This is the tween factory which is called after start event");
     return function(t) {
        console.log("This is the interpolating tween function");
     };})
  .ease("quad") 
  .durantion(250).attr("cy", function(d){
    return d*d;});

ただし、tweens補間を目的としているため、他の目的でそれらを使用することは、おそらく悪い考えであり、APIの悪用です。

多段階遷移の使用を検討しましたか？これは、を追加して新しい遷移each("end", function() { nextStep(...) })を開始するものになります。nextStep次に、個々の遷移の期間を短縮し、入力されるたびにアクションを実行できますnextStep。

于 2012-10-26T09:35:08.650 に答える