svg - 沿着 d3 路径移动一个圆圈，以不同的速度动画

Question

我真的发现这个问题和答案对如何以不同的速度制作线条动画很有帮助。

Changing speed of D3 path animation

哪个指向这个块:
http://bl.ocks.org/explunit/6082362

我一直在关注这个并想添加一个沿着线的起点移动的圆圈。
我添加了一个标记

    var marker = g.append("circle")
    .attr("r", 7)
    .attr("id", "marker")

但对于我的生活，我无法让它以同样的速度沿着这条线前进。

我已将此位添加到该块的末尾

var p = path.node().getPointAtLength(lengthAt[i-1] );

    markerTransition = markerTransition.transition()
        .duration(lineData[i].speed)
        .ease('linear')
        .attr("transform", "translate(" + p.x + "," + p.y + ")");

现在我有一个移动的圆圈，但它与线不同步并且由于某种原因位于不同的坐标。

我怎样才能让我的圆圈以(不同的速度)正确地沿着这条线走？

更新:
差不多好了!
我添加了一个 jsfiddle: http://jsfiddle.net/mbrownshoes/k86fbade/6/
圆圈以正确的速度移动到第一个点，现在我需要圆圈从前一个点而不是从头开始每个过渡。

Answer 1

已解决(尽管以另一种方式解决)

http://jsfiddle.net/mbrownshoes/ozpt6dn7/2/

for (var i = 0; i < lineData.length - 1; ++i) {

wait[i] = tottime;
tottime += lineData[i].t;
setTimeout(function () {
    temp[0] = lineData[ipath];
    temp[1] = lineData[ipath + 1];
    time = lineData[ipath].t;

    var lineGraph = ss.append("path")
        .attr("d", lineFunction(temp))
        .attr("stroke", "grey")
        .attr("stroke-width", 3)
        .attr("fill", "none");



    var totalLength = lineGraph.node().getTotalLength();

    console.log(totalLength);
    console.log(ipath + " " + temp[0].x + " " + temp[1].x + " " + time);

    lineGraph.attr("stroke-dasharray", totalLength + " " + totalLength)
        .attr("stroke-dashoffset", totalLength)
        .transition()
        .duration(time)
        .ease("linear")
        .attr("stroke-dashoffset", 0);

    circle.transition()
        .duration(time)
        .ease("linear")
        .attr("transform",

    function () {


        return "translate(" + temp[1].x + "," + temp[1].y + ")";
    });

    console.log(ipath + ": " + time + ", " + wait);
    ipath++;
}, wait[i]);

}

感谢 https://groups.google.com/forum/m/#!topic/d3-js/UhaN7HdYTWM