D3.js - анимировать точку вдоль пути с переменной скоростью

У меня есть три массива точек, которые определяют три пути, и мне нужно перемещать разные точки по каждому пути с возможностью изменения скорости. Три массива содержатся в другом массиве, поэтому структура в основном выглядит так:

DataByDays = [ [(array of x1's), (array of y1's)], [(array of x2's), (array of y2's)], [(array of x3's), (array of y3's)]

Я уже начертил пути и имею массив, который содержит их одинаково, например:

PathArray = [path1, path2, path3]

На данный момент я создал каждый из трекеров:

trackers = svg.selectAll("circle").data(dataByDays)
        .enter()
        .append("circle")
        .attr("cx", function(d){return d[0][0];}) //x coord @ start of path 
        .attr("cy", function(d){return d[0][1];}) //y coord @ start of path
        .attr("r", 5)
        .attr("fill", "black");

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