更改沿路径动画的起点

Question

我有一个简单的路径元素，必须使用 D3.js 跟随一个圆圈。我找到了一种方法，通过在 SVG 上使用 getTotalLength 和 getPointAtLength 方法，如本例所述：

http://bl.ocks.org/mbostock/1705868

它工作正常，但问题是我的圆圈从底部开始并沿着线向上，我如何更改动画中圆圈的起点，使其从上到下？这是我的代码：

我的路径元素：

<path id="testpath" style="fill:none;stroke:#FFFFFF;stroke-width:0.75;" d="M1312.193,1035.872l80.324-174.458l13.909-264.839l507.09-211.095
        l8.667-248.405" />

D3 代码：

 function followPath()
   {


    var circle = d3.select("svg").append("circle")
                                    .attr("r", 6.5)
                                    .attr("transform", "translate(0,0)")
                                    .attr("class","circle");

    var path = d3.select("#testpath");

    function transition()
    {
        circle.transition()
            .duration(10000)
            .attrTween("transform", translateAlong(path.node()))
            .each("end", transition);
    }

    function translateAlong(path)
    {
        var l = path.getTotalLength();
        return function (d, i, a) {
            return function (t) {
                var p = path.getPointAtLength(t * l);
                return "translate(" + p.x + "," + p.y + ")";
            };
        };
    }

    transition();
}

我做了一个小提琴，你可以看到它从下到上（我知道视图框很大，它是更大的 SVG 图像的一部分）

http://jsfiddle.net/6286X/3/

Answer 1

动画将从 SVG 中定义的行首开始。要使其从任意点开始，您必须相应地偏移它。为了与您的情况完全相反，更改几乎是微不足道的-您只需从末尾开始并朝着开头移动。也就是说，您通过考虑 1-t 而不是 t 来“反转”转换：

return function (t) {
    var p = path.getPointAtLength((1-t) * l);
    return "translate(" + p.x + "," + p.y + ")";
};

完整的演示here。