Приостановить и возобновить переход в D3. js для нескольких кругов

Question

Я работаю над приостановкой и возобновлением перехода, следуя этому примеру . Я могу остановить переход нажатием кнопки, но не могу возобновить его для завершения цикла.

pauseTrans () функция убивает переход, и t и nextT должны каким-то образом делать трюк, но я не уверен, как это сделать. Любая помощь приветствуется.

Я загрузил рабочий код на jsFiddle

 <svg></svg>
 <button onclick="pauseTrans()">Pause</button>

Javascript File

    var svg = d3.select('svg');
    var color = (v) => v;
    var nTrails = 20;



    function Trails(x, y) {
      svg.append('circle')
        .classed('shadow', true)
        .attr('cx', x)
        .attr('cy', y)
        .attr('r', 10)
        .style('fill', 'grey')
        .style('opacity', 0.5)
        .transition()
        .duration(500)
        .ease(d3.easeLinear)
        .style('fill', 'lightgrey')
        .style('opacity', 0.1)
        .attr('r', 3)
        .remove();
    }

    function drawChart(newData) {
      var circles = svg.selectAll(".dot")
        .data(newData);

      circles.enter()
        .append("circle")
        .attr("cx", (d) => d.open.x)
        .attr("cy", (d) => d.open.y)
        .merge(circles)
        .transition() // and apply changes to all of them
        .duration(2000)
        .ease(d3.easeLinear)
        .tween("shadow", function(d) {
          var xRange = d.close.x - d.open.x;
          var yRange = d.close.y - d.open.y;
          var nextT = 0;
          return function(t) {
            // t is in [0, 1), and we only want to execute it nTrails times
            if(t > nextT) {
              nextT += 1 / nTrails;
              Trails(
                d.open.x + xRange * t,
                d.open.y + yRange * t
              );
            }
          };
        })
        .attr("class", "dot")
        .attr("r", 10.5)
        .attr("cx", (d) => d.close.x)
        .attr("cy", (d) => d.close.y)
        .style("fill", function(d) { return color(d.class); });

        circles.exit()
       .remove();
    };

    function pauseTrans(){
        d3.selectAll("circle")
            .transition() // stops the current transition
            .duration( 0 ); 
    }


    drawChart([
      {open: {x: 20, y: 20}, close: {x: 150, y: 150}, class: 'red'},
      {open: {x: 150, y: 20}, close: {x: 20, y: 150}, class: 'blue'},
      {open: {x: 20, y: 20}, close: {x: 150, y: 20}, class: 'green'}
    ]);