Question

我真的发现这个问题和答案对于如何以不同的速度获得动画效果很有帮助。

哪个指向这个块： 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

沿着以不同速度制作动画的d3路径移动一个圆圈

1 个答案: