沿着d3路径移动圆圈，以不同速度进行动画处理

Question

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

改变D3路径动画的速度

它指向了这个区块： 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/ 圆以正确的速度移动到第一个点，现在我需要圆从上一个点开始每次过渡，而不是从开始处。

- brownshoes

---

你有 JSFiddle 吗？ - AJ_91

所以你想让标记在路径的起点从一个节点移动到另一个节点吗？ - AJ_91

我建议你看一下这个链接：http://bl.ocks.org/KoGor/8162640 - AJ_91

越来越接近了......但出现问题，我不能让圆形平稳地移动到第二个点。http://jsfiddle.net/mbrownshoes/k86fbade/4/ - brownshoes

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的帮助。

- brownshoes