Bostock 的 d3 对象恒常性示例：d3.transition().each 的作用是什么？

Question

在此处完成 fiddle：https://jsfiddle.net/scottbrown0001/o7qL4dpr/

我正在尝试模仿 Mike Bostock 的对象恒常性示例 https://bost.ocks.org/mike/constancy/，但我无法弄清楚第 133 行的 each() 所 select 编辑的是什么：

function change() {
  clearTimeout(timeout);

  d3.transition()
    .duration(altKey ? 7500 : 750)
    .each(redraw);
  }

我在我的 fiddle 示例中使用了看起来相同的构造，虽然它似乎确实获得了到运行的过渡效果，但我没有看到较慢的持续时间。总的来说，这个构造d3.transition.each() select的具体细节是什么？看起来它可能是某种 "master transition"，但我看不出 each() 迭代是如何工作的。我一定有一些关键的区别，但我没有看到。

Answer 1

与您的其他问题非常相似，这与 d3 v3 与 d3 v4 有很大关系。您将无法在 v4

中使用此代码重现该行为

查看 d3 v4 发行说明的 this section，其中 mbostock 解决了 transition.each 中的更改：

This method replaces the deeply magical behavior of transition.each in 3.x; in 4.0, transition.each is identical to selection.each

在 v3 中，transition.each 与此处记录的不同：https://github.com/d3/d3-3.x-api-reference/blob/master/Transitions.md#each

[...] immediately invokes the specified function for each element in the current transition, passing in the current datum d and index i, with the this context of the current DOM element.

所以基本上它不以相同方式工作的原因是现在，transition.each 将循环遍历受转换影响的每个元素。

Bostock 的 d3 对象恒常性示例：d3.transition().each 的作用是什么？

Bostock's d3 Object Constancy example: what is effect of d3.transition().each?

each

transition

duration

d3.js