D3 tween - 暂停和恢复控件

Question

我正在尝试编辑此 d3 example。

更具体地说，我将尝试应用 pause resume guide 的暂停-恢复控件以及视频下方的控制栏。最后我想像这样：

如何在开始时应用暂停恢复控制？

Answer 1

这是一个快速实施。暂停实质上取消了当前的过渡，并且播放基于暂停的 time/position 恢复：

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.

D3 tween - 暂停和恢复控件

D3 tween - pause and resume controls

javascript

controls

tween

d3.js