修正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
}
}
}
答
var l = path.getTotalLength()/2;
因为你的路径是两条弧线,一个从A到B,另一个从B到A遍历的完整路径它总是要回归A 。做一半长度的路径,它停在B.
在另一点上你的小提琴最终在我的电脑崩溃铬,我认为这是与调用自己的过渡('无限循环'位)
格雷厄姆非常感谢你,我非常感谢这一点。我没有意识到有两个弧。我也没有意识到脚本在一段时间后崩溃。当然,如果我停止B上的循环并结束转换,那么这将停止长时间运行的脚本? – Noobster
你这样做只是一次就能解决这个问题。要继续这样做(如果你愿意的话),我会看到它是如何工作的,因为这似乎并没有减慢 - > http://bl.ocks.org/mbostock/1125997 – mgraham