Question

这是一个非常简单的问题。这是我的jsfiddle，我使用D3在两个节点之间设置一个圆圈（原始代码是Mike Bostock＆＃39; s）：http://jsfiddle.net/Guill84/uxy8d9vs/5/。

当圈子到达节点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
      }
    }
  }

Answer 1

var l = path.getTotalLength() / 2;

因为你的路径是两个弧，一个从A到B，另一个从B到A.遍历完整路径它总是会返回到A.做它停在B的路径长度的一半

另一方面，你的小提琴最终会崩溃我的电脑上的铬，我认为这与调用自身的转换有关（＆＃39;无限循环＆＃39;位）

修改D3圈动画

1 个答案: