如何在 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 ：当我尝试为所有圆圈设置动画时，我只看到一个圆圈在动画，而不是像这里 https://jsfiddle.net/tzbd9r1f/1/ 那样的 5 个圆圈。

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

当然这也需要改变函数调用，如果你也想循环无限沿着路径走这里有一个小问题，当我们将函数作为参数传递时，它需要一个@987654321 @。

总而言之，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);
  };
}              

另外不要忘记在forEach-loop 中更改transitionAll 函数的调用，而不是startPoints。