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中，您可以将<tr style="background-color: #F7F6F3"> <html> <head> <title></title> </head> <body> Date:    Sep 7 2018 Re: Annual Re-certification of Information Profiles Contact Name:    Paul Bunyan    Email: Bunyan@SomeCompany.com Gen Name:    Some Company Gen Number:    623113 Date:    Sep 7 2018 Re: Annual Re-certification of Information Profiles Contact Name:    Paul Bunyan    Email: Bunyan@SomeCompany.com Gen Name:    Some Company Gen Number:    623113 <tr style="background-color: #F7F6F3">The annual re-certification of your Information Profiles are due for those expiring in the next ninety (90) days. It is necessary to complete this process in advance to ensure no interruption of service. </tr> <tr style="background-color: #F7F6F3"> <table><tr style="background- color: #5D7B9D; font-weight: bold; color: white;"> <td>IDNumber</td><td>Decription</td><td>Recert Due Date</td></tr></tr> <tr><td>780877</td><td>quas vidit docendi pro</td><td>Sep 13 2018 </td></tr> <tr style="background-color: #F7F6F3"><td>780878</td><td>Lorem ipsum dolor</td><td>Sep 13 2018 </td></tr> <tr><td>780879</td><td>sit amet</td><td>Sep 13 2018 </td></tr> <tr style="background-color: #F7F6F3"><td>780880</td><td>uisset eligendi ius</td><td>Sep 13 2018 </td></tr> <tr><td>780881</td><td>vix illum commune</td><td>Sep 13 2018 </td></tr> <tr style="background-color: #F7F6F3"><td>780882</td><td>mea omnesque liberavisse</td><td>Sep 13 2018 </td></tr> <tr><td>780883</td><td>suscipiantur cu</td><td>Sep 13 2018 </td></tr> <tr style="background-color: #F7F6F3"><td>780884</td><td>cam appareat mei ut</td><td>Sep 13 2018 </td></tr> <tr><td>780885</td><td>sit maiorum repudiare</td><td>Sep 13 2018 </td></tr> <tr style="background-color: #F7F6F3"><td>780886</td><td>olum dicat fabellas</td><td>Sep 13 2018 </td></tr> <tr><td>780937</td><td>vidit docendi pro</td><td>Sep 13 2018 </td></tr> </table> Thank you for allowing us to provide you with reliable and safe services. We strive for excellence in providing these services and we hope that this has been your experience with us.</body></html>用于事件：

transition.each（[type，] listener）

如果指定了type，则为过渡事件添加一个侦听器，   支持“开始”，“结束”和“中断”事件。听众将   为过渡中的每个单独元素调用。（v3 docs）

在d3v4和v5中，对于事件，此方法已替换为transition.each("end",...)：

selection.on（typenames [，listener [，options]]）<>

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

transition.on("end",...)仍可用于对要转换的每个项目执行操作，但不能用于事件监听。由于版本之间的更改，您会得到一个错误，它是t.call不是函数（它是一个字符串：transition.each(function)），并且警报从不触发。

对于d3v4或d3v5，请改用：

"end"

Updated fiddle。

D3：几乎相同的代码，不同的结果

1 个答案:

transition.each（[type，] listener）

selection.on（typenames [，listener [，options]]）<>