修正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圆圈动画

回答

相关问题