如何在d3.js中的路径上设置多个圆圈的动画？

Question

我试图以此作为参考https://bl.ocks.org/mbostock/1705868 。

我想旋转多个圆点，而不是无限旋转上方的单个圆。

          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
              }
            }
          }

我最初在路径上将所有必需的点绘制为https://jsfiddle.net/tzbd9r1f/2/

我在这里面临两个问题：

1：当我尝试为所有圆圈设置动画时，我看到的只有一个动画圈，而不是5个圆圈，如https://jsfiddle.net/tzbd9r1f/1/ 。

2：如果我尝试对所有5个圆调用结束过渡，则在使该无限旋转如此处https://jsfiddle.net/tzbd9r1f/3/的情况下，我会得到最大的堆栈错误

请指导。

Answer 1

代码中的基本问题是，对所有点同时应用相同的翻译。 实际上，您的所有圈子都在沿着这条路前进，但是它们彼此覆盖-因此，您已经完成了任务的主要部分。 但是，如果希望不同的圆在不同的坐标处，则必须为其应用不同的补间。 也就是说，即使您为每个圆计算出的startPoints都不同，您也不会在动画后期使用它，因此所有圆都一起移动。

我通过将点的索引作为新参数添加到translateAlong函数并通过一些基本数学计算圆的位置来解决此问题，因此它变为：

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

当然，这还需要更改函数调用，并且如果您还想圈出无限的路径，这里有一个小问题，因为当我们将函数作为参数传递时，它需要部分函数应用程序 。

总而言之， transitionAll以以下方式更改（我还添加了线性缓动以使圆具有更规则的移动速度）：

function transitionAll(marker,ind){
  console.log(marker);
  marker.transition()
    .duration(7500).ease("linear")
    .attrTween("transform", translateAlong(path.node(),ind))
    .each("end", partial(transitionAll,marker,ind));// infinite loop*/

新的部分函数是从我链接的帖子中复制的：

function partial(func /*, 0..n args */) {
  var args = Array.prototype.slice.call(arguments, 1);
  return function() {
    var allArguments = args.concat(Array.prototype.slice.call(arguments));
    return func.apply(this, allArguments);
  };
}              

同样不要忘记在startPoints的forEach循环中更改transitionAll函数的调用。