沿着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/ 圓正在以正確的速度移動到第一個點，現在我需要圓從每個點開始，而不是從開始點開始。

來源

2015-02-23 brownshoes

你有一個的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

來源

2015-02-27 15:27:59 brownshoes

沿着D3路徑移動一個圓圈以不同的速度動畫

回答

相關問題