D3補間 - 暫停和恢復控制

Question

我想編輯這個d3 example。

更具體地說，我會嘗試應用pause resume guide的暫停恢復控件以及像這樣的控制欄，我們在視頻下。最後我想象有這樣的事情：

如何申請在年初暫停恢復控制？

Answer 1

這是一個快速實施。暫停基本上取消當前過渡和播放它重新開始基於時間/位置被暫停：

var pauseValues = { 
    lastT: 0, 
    currentT: 0 
}; 
function transition() { 
    circle.transition() 
     .duration(duration - (duration * pauseValues.lastT)) // take into account any pause 
     .attrTween("transform", translateAlong(path.node())) 
     .each("end", function(){ 
     pauseValues = { 
      lastT: 0, 
      currentT: 0 
     }; 
     transition() 
     }); 
} 
function translateAlong(path) { 
    var l = path.getTotalLength(); 
    return function(d, i, a) { 
    return function(t) { 
     t += pauseValues.lastT; // was it previously paused? 
     var p = path.getPointAtLength(t * l); 
     pauseValues.currentT = t; // just in case they pause it 
     return "translate(" + p.x + "," + p.y + ")"; 
    }; 
    }; 
} 
d3.select('button').on('click',function(d,i){ 
    var self = d3.select(this); 
    if (self.text() == "Pause"){ 
    self.text('Play'); 
    circle.transition() 
     .duration(0); 
    setTimeout(function(){ 
     pauseValues.lastT = pauseValues.currentT; // give it a bit to stop the transition 
    }, 100); 
    }else{ 
    self.text('Pause'); 
    transition(); 
    } 
}); 
transition(); 

例here。