D3：几乎相同的代码，不同的结果[重复]

Question

我正在尝试应用this 建议来捕捉几个转换的结束。 但是在我的本地文件中，我收到了 Uncaught TypeError: t.call is not a function 错误。代码如下：

    var svg = d3.select('svg');

  function endall(transition, callback) { 
    if (typeof callback !== "function") throw new Error("Wrong callback in endall");
    if (transition.size() === 0) { callback() }
    var n = 0; 
    transition 
        .each(function() { ++n; }) 
        .each("end", function() { if (!--n) callback.apply(this, arguments); }); 
  } 


for (var i=0;i<5;i++) {

    svg.append('rect')
            .attr("x",i*60)
      .attr("y",50)
      .attr("height",50)
      .attr("width",50)
      .style("fill","#ff0000");
}

    svg.selectAll("rect:not(.active)")
      .transition()
      .duration(1000)
      .style("fill","#00ff00")
      .call(endall, function() { alert("all done") });

当我使用 D3 模板将其移植到 jsfiddle 时，它运行良好。另一方面，当我在没有 D3 模板的情况下将其移植到 jsfiddle 时，我得到了同样的错误。

显然我遗漏了什么，但我无法理解。

Answer 1

不产生错误的小提琴在 v3 上运行，而在 v5 上运行的小提琴。

在 d3v3 中，您可以将 transition.each("end",...) 用于事件：

transition.each([type, ]listener)

如果指定了类型，则为过渡事件添加监听器， 支持“开始”、“结束”和“中断”事件。听众将是 为转换中的每个单独元素调用。 (v3 docs)

在 d3v4 和 v5 中，此方法被替换为 transition.on("end",...) 用于事件：

selection.on(typenames[, listener[, options]])

为指定的每个选定元素添加或删除侦听器 事件类型名称。 (current docs)

transition.each(function) 仍可用于对正在转换的每个项目执行操作，但不能用于事件侦听。由于版本之间的这种变化，您会收到一个错误，即 t.call 不是函数（它是一个字符串："end"），并且永远不会触发警报。

对于 d3v4 或 d3v5，请改用：

transition 
    .each(function() { ++n; }) 
    .on("end", function() { if (!--n) callback.apply(this, arguments); }); 

Updated fiddle.