Прерывание переходов прокрутки в D3.js

Я использую библиотеку javascript scrollama для написания статьи о прокрутке, которая включает в себя переход графиков D3 в представление и из него при прокрутке пользователем. В основном это работает, но графики накладываются друг на друга, если я прокручиваю слишком быстро.

Вот jsfiddle на основе этого пример автора scrollama. В моем примере цветные точки должны исчезать по одной. Если бы вы быстро прокрутили до конца, прерывистые точки не должны отображаться. Следующие фрагменты показывают, как я настроил переходы:

Я определяю некоторые функции, которые создают мои «графики», а затем вызывают их.

var makeCircle0 = function(){

  g.append("circle")
    .attr("cx", 50)
    .attr("cy", 100)
    .attr("r", 20)
    .attr("fill", "red")
    .attr("class", "redcircle")

  g.selectAll(".redcircle")
    .attr("opacity", 0)
}

makeCircle0();

// Do this for makeCircle1, 2, and 3, also. 

Затем я создаю функции для обработки переходов. Этот говорит, чтобы красный круг исчезал, а остальные круги устанавливались на 0 непрозрачности. Я делаю это для всех кругов/этапов.

var showCircle0 = function(){

  g.selectAll(".redcircle")
  .transition()
  .duration(1000)
  .attr("opacity", 1)

  g.selectAll(".yellowcircle").attr("opacity", 0)
  g.selectAll(".greencircle").attr("opacity", 0)
  g.selectAll(".bluecircle").attr("opacity", 0)

}

В этом разделе создается массив моих функций перехода, чтобы я мог вызывать их на определенных этапах страницы при прокрутке. Это похоже на то, как Джим Валландингем держал в руках свой скроллер.

var activateFunctions = [];
activateFunctions[0] = showCircle0;
activateFunctions[1] = showCircle1;
activateFunctions[2] = showCircle2;
activateFunctions[3] = showCircle3;

Наконец, это вызывает нужную функцию на нужном шаге страницы. Что он и делает... но не без остановки других переходов, которые были запущены на предыдущем шаге, что привело к появлению нескольких точек на разных этапах.

function handleStepEnter(response) {
  step.classed('is-active', function (d, i) {
    return i === response.index;
  })

  figure.call(activateFunctions[response.index])
}

Как я могу предотвратить это?