D3.js：一時停止]ボタンが機能しない（アニメーションに使用するコールバック関数内）

Question

私は一時停止し、私のアニメーションに再開の機能を追加しようとしています：

それは黄色（列車の位置を示しています）を1行に表示します。私のデータは入れ子になっていて、キーは時間帯です。現在render(t)の機能がすべてintervalミリ秒ごとに呼び出されています。 私はこれについてthis guideとthis questionを読んだことがありますが、私のケースにそれを適用する方法についてはまだ失われています。

私はアニメーションを一時停止し、列車の属性を検査してから再開したいと考えています。 ご協力いただければ幸いです！

currentTime = 0; 
interval = 100; 
var trainsHolder = svg.append('g') 

function render(t){ 

    trains = trainsHolder 
      .selectAll('circle') 
      .data(nested_train_data[t], function(d){ return d.car_id}) 

    // enter 
    trains 
     .enter() 
     .append("circle") 
     .each(setAttributes) 

    // update 
    trains 
     .transition() 
     .duration(interval) 
     .each(setAttributes) 

    // exit 
    trains.exit().remove(); 

    // update timer 
    timer_holder 
     .select("text") 
     .transition() 
     .duration(interval) 
     // .text("Time : " + String(t/60)) 
     .text(String(nested_train_data[t][0].Date.getHours()) + ":" + String(nested_train_data[t][0].Date.getMinutes())) 

    }; 

render(currentTime); 

var callback = function() { 
     return function() { 
// my time increments are 60 seconds 

      currentTime = currentTime + 60; 
      // console.log(currentTime); 
      if (currentTime <= maxTime) { 
       render(currentTime); 
       d3.timer(callback(), interval); 
      } 
      return true; 
     } 
    } 



    d3.timer(callback(), interval); 
// NOT WORKING 
$("#pauseBtn").click(function() { 
     trainsHolder.selectAll('circle').transition().duration(0); 
     }); 

Answer 1

「ポーズ」を外しても、アニメーションは正常に動作していますか？もしそうなら、あなたのコールバック関数に問題があるように見えます。それがアニメーションを動かすものです。

次のようなものが必要です。基本的な考え方は、シミュレーションが一時停止されていないとmaxTimeを超えていない場合にのみ場合は、アニメーションタイマーを進めるということです。

return function(elapsed) { 
    paused = getPausedState(); 
    //use the elapsed time to set instead of a fixed interval, so the animation plays at a constant rate 
    //only advance the animation timer if the simulation is not paused 
    //and we haven't exceeded the max 
    nextTime = paused || currentTime > maxTime ? currentTime : currentTime + elapsed; 
    render(nextTime); 
    d3.timer(callback(), interval);