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

Posted 2023-02-22

【中文标题】D3：几乎相同的代码，不同的结果[重复]

【英文标题】：D3: almost identical codes, different results [duplicate]

【发布时间】：2019-02-13 06:38:12

【问题描述】：

我正在尝试应用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 时，我得到了同样的错误。

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

【参考方案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.

【讨论】：

主要版本对于 javascript 库来说非常重要，显然 jsfiddle 并没有与它们保持大规模更新（即将发布一个与您类似的不太深入的答案，bravo on击败我至少 3 分钟 :) )