修正D3圓圈動畫

這是一個非常簡單的問題。這裏是我的jsfiddle，我使用D3（原始代碼是Mike Bostock's）在兩個節點之間創建一個圓圈：http://jsfiddle.net/Guill84/uxy8d9vs/5/。修正D3圓圈動畫

如何在節點B到達節點B時阻止該節點返回節點A？代碼的相關位如下：

var path = d3.select("path#AB"), 
    startPoint = pathStartPoint(path); 

    marker.attr("r", 7) 
    .attr("transform", "translate(" + startPoint + ")"); 

    transition(); 


    //Get path start point for placing marker 
    function pathStartPoint(path) { 
    var d = path.attr("d"), 
    dsplitted = d.split(" "); 
    return dsplitted[1].split(","); 
    } 

    function transition() { 
    marker.transition() 
     .duration(2000) 
     .attrTween("transform", translateAlong(path.node())); 

    } 

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

來源

2016-02-05 Noobster

var l = path.getTotalLength()/2;

因爲你的路徑是兩條弧線，一個從A到B，另一個從B到A遍歷的完整路徑它總是要回歸A 。做一半長度的路徑，它停在B.

在另一點上你的小提琴最終在我的電腦崩潰鉻，我認爲這是與調用自己的過渡（'無限循環'位）

來源

2016-02-05 15:11:40 mgraham

格雷厄姆非常感謝你，我非常感謝這一點。我沒有意識到有兩個弧。我也沒有意識到腳本在一段時間後崩潰。當然，如果我停止B上的循環並結束轉換，那麼這將停止長時間運行的腳本？ – Noobster

你這樣做只是一次就能解決這個問題。要繼續這樣做（如果你願意的話），我會看到它是如何工作的，因爲這似乎並沒有減慢 - > http://bl.ocks.org/mbostock/1125997 – mgraham

修正D3圓圈動畫

回答

相關問題