javascript - 如何在 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
    }
  }
}

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

总而言之，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 循环中更改 startPoints 中对 transitionAll 函数的调用。