点沿路径插值平移功能答案

【问题标题】：Point along path interpolation translate function点沿路径插值平移功能
【发布时间】：2016-07-30 22:59:06
【问题描述】：

我正在尝试按照以下代码重新创建“沿路径点”d3 可视化：http://bl.ocks.org/mbostock/1705868。

看起来很简单，我只是无法理解每 10 秒调用一次的 'translateAlong' 函数中嵌套函数中的参数：

function translateAlong(path) {
  var l = path.getTotalLength();
  return function(d, i, a) {
    return function(t) {
      var p = path.getPointAtLength(t * l);
      return "translate(" + p.x + "," + p.y + ")";
    };
  };
}

在第一个嵌套匿名函数中：

d 始终未定义
i 等于 0
a 等于 'translate(480,200)'（路径起点的坐标）

在第二个嵌套匿名函数中：

t 在 10 秒内从 0 逐渐增加到 1 到动画开始运行

我的问题是第一个匿名函数中的 d、i 和 a 参数来自哪里，以及 它们如何用于在第二个匿名函数中获取 t.

【问题讨论】：

标签： javascript d3.js

【解决方案1】：

translateAlong 返回一个函数，该函数将在转换开始时由d3 调用，d3 将调用它并传递d、i 和a 的参数，其中：

d 是绑定到正在发生转换的元素的基准。这始终是未定义的，因为没有数据绑定到该圆圈。
i 是其选择中元素的索引。它始终为 0，因为它是选择中的唯一元素。
a 有点神秘，因为 documentation 没有提到它。查看source code，它被调用为tween.call(this, d, i, this.getAttribute(name))，因此您注意到d3 将传递正在调整的属性的值，在本例中为转换。

唉，因为这些参数实际上都没有在补间中使用，所以 Bostock 先生可能只是对其进行了编码：

return function() {
  return function(t) {
    ...

接着，这个函数返回另一个签名为function(t)的函数。这是函数d3 将在转换中的每一步调用，传递参数t，表示转换中的当前步骤/时间。

【讨论】：

还有一件事。在您的回答中，您说最后返回的函数 ('function(t)') 将在转换中 在每个步骤 中返回，并且 d3 'attrTween' 文档状态：“返回的插值器然后为过渡的每一帧调用".我想知道是什么控制了过渡中的步数或帧数。我知道在我发布的示例代码中，转换的总时间为 10 秒，但看起来对于每个后续转换，插值函数被调用的次数不同（在 10 秒内约 1300-1450 次）
不，不是在每一步都返回，而是在每一步执行。我应该使用“框架”这个词而不是“步骤”来与文档保持一致，但我的意思是一样的。
抱歉，当我第一次提交上面的评论时，我没有完成 - 想知道是什么控制了在转换过程中发生的步骤或执行次数。
这取决于浏览器。如果支持d3 将使用requestAnimationFrame，根据mozilla 的docs，您应该获得大约每秒60 帧（FPS）。如果requestAnimationFrame 不可用，d3 将每 17 毫秒使用一次setTimeout（也就是大约 60 FPS）。它运行多长时间以及因此多少帧取决于过渡的持续时间。源代码是here。

【解决方案2】：

第一个函数作为参数返回给attrTween，根据transition.attrTween documentation，它需要一个可以使用d、i和a参数调用的函数，以获得一个将传递时间t 的函数。如果不了解文档化的界面，这些可能看起来像是任意或神奇的参数。

【讨论】：