D3 tween - pause and resume controls

Question

I am trying to edit this d3 example.

More specifically, I will try to apply the pause-resume controls of a pause resume guide in addition with a control bar like this we have under videos. At the end I imagine to have something like this:

How can apply the pause resume control in the beginning?

Answer 1

Here's a quick implementation. The pause essentially cancels the current transition and the play resumes it based on time/position it was paused:

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();

Example here.