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

问题描述：

我真的发现这个问题和答案有助于如何以不同的速度得到一条线条动画。沿着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/ 圆正在以正确的速度移动到第一个点，现在我需要圆从每个点开始，而不是从开始点开始。

你有一个的jsfiddle？ – 2015-02-24 09:16:47

所以你希望标记位于从节点到节点的路径的开始？ – 2015-02-24 14:01:41

身份证明说看看这个http://bl.ocks.org/KoGor/8162640 – 2015-02-24 14:07:10

答

解决（虽然绕了另一种方式）

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路径移动一个圆圈以不同的速度动画

相关推荐