javascript - 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 .