Question

我有一个非常简单的D3用例：

向用户显示包含信息的多个框
按下＆＃34;更新＆＃34;按钮，新数据绑定到框（div）的集合，导致一个框退出，一个新框进入。
我想为输入，更新和退出选择设置动画

目前，我计划在退出选择上进行转换，延迟时间为5秒，而合并更新选择（包括附加的输入选择）的转换会立即运行，持续时间为4.5秒。

更新转换是＆＃34;链接＆＃34; - 我使用transition.each（）为更新选择中的每个元素安排第二次转换，并监听＆＃34; end＆＃34;事件

问题：

如果用户点击＆＃34;更新＆＃34;快速两次或多次，exit（）转换无法完成，导致屏幕上剩余的框。

我无法弄清楚为什么会发生这种情况 - 对我而言，对我的现有元素的转换如何被覆盖并不明显。

以下是一个工作示例：http://jsfiddle.net/yw8qmdLe/3/

提前致谢！

JavaScript的：

  var dat = [0,1,2,3,4,5];

  var svg = d3.select("#main");
  svg.selectAll("div.box").data(dat).enter().append("div").attr("class","box").text(function(d,i){return d});

  var button = d3.select("#button")
  button.on("mousedown",function(){
    dat.push(dat[dat.length-1] + 1);
    dat.shift();

    var update = svg.selectAll("div.box").data(dat,function(d,i){return d});
    update.style("border-left","0px solid #0000ff").text(function(d,i){return d + ": update"});


    update.enter().append("div").attr("class","box").text(function(d,i){return d + ": enter"}).style("border-left","0px solid #00ff00");
    update.exit()
    .style("border-left","40px solid #000000")
    .text(function(d,i){
      return d + ": exit";
    }).transition().delay(5000).duration(1000)
    .style("width",function(d,i){
      //console.log(this.__transition__);
      return "0px";
    })
    .style("border-left-width","0px")
    .text("")
    .remove();

    update.transition().duration(4500).style("border-left-width","40px").each("end",function(d,i){
      d3.select(this).transition().duration(700).style("border-left-width","0px")
    })

  })

D3转换 - 退出（）选择失败

0 个答案: