代码之家 › 专栏 › 技术社区 › tic

D3:几乎相同的代码,不同的结果[重复]

jsfiddle transition d3.js javascript

1

tic · 技术社区 · 7 年前

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") });

jsfiddle 使用D3模板,效果很好。另一方面,当我把它移植到 jsfiddle 如果没有D3模板,我会得到同样的错误。

很明显我遗漏了什么,但我不明白是什么。

1 回复 | 直到 7 年前

1

2

Andrew Reid 7 年前

不产生错误的fiddle在v3上运行,而产生错误的fiddle在v5上运行。

transition.each("end",...) 对于事件:

如果指定了type,则为转换事件添加侦听器, 为转换中的每个元素调用。( v3 docs )

在d3v4和v5中,此方法被替换为 transition.on("end",...)

选择.on(类型名[,侦听器[,选项]])<>;

事件类型名。( 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