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

Question

这个问题在这里已有答案：

• D3 transition looping throwing Uncaught TypeError: t.call is not a function 1回答

我正在尝试应用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上运行的小提琴则在v3上运行。

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

transition.each([type, ]listener)

如果指定了type，则为转换事件添加一个侦听器，支持“start”，“end”和“interrupt”事件。将为转换中的每个单独元素调用侦听器。 （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。