D3.js：停止转换中断？ [英] D3.js: Stop transitions being interrupted?

问题描述

我使用D3.js.我有转换工作很好，但我只有一个问题：如果第二个转换开始之前的第一个结束，

I'm working with D3.js. I've got transitions working nicely, but I just have one problem: if a second transition starts before the first one ends,

这是一个JSFiddle演示问题： a href =http://jsfiddle.net/kqxhj/11/ =noreferrer> http://jsfiddle.net/kqxhj/11/

This is a JSFiddle demonstrating the problem: http://jsfiddle.net/kqxhj/11/

它大部分时间工作正常 - CDG和LAX随着数据更改附加和删除 - 但如果你点击按钮快速连续两次，你会注意到，新的元素不会出现。

It works fine most of the time - CDG and LAX get appended and removed as the data changes - but if you click the button twice in rapid succession, you'll notice that the new elements don't appear.

这是我的代码的肉：

function update(data) { 

  var g = vis.selectAll("g.airport").data(data, function(d) { 
    return d.name;  
  });
  var gEnter = g.enter().append("g")
  .attr("class", function(d) {    
    return "airport " + d.name;
  });
  // Perform various updates and transitions... 
  [...]

  // Remove exited elements. 
  g.exit().transition()
    .duration(1000)
   .attr("transform", "translate(0," + 1.5*h + ")");
  g.exit().transition().delay(1000)
   .remove();
}

d3.select('#clickme').on("click", function() {  
  update(current_data); 
});

我试图添加一些调试语句来了解发生了什么，是的，当它发生时，退出选择有4个元素，而不是3 - 我不明白为什么这是。

I've tried to add some debug statements to figure out what's going on, but all I can see is that when it happens, the exit selection has 4 elements in, not 3 - I don't understand why this is.

有没有办法，无论是在D3还是在基本的JavaScript，我可以确保转换不重叠？

Is there a way, either in D3 or in basic JavaScript, that I can ensure the transitions don't overlap?

推荐答案

发生了什么事情是数据表示重新输入之前，它被从DOM中删除（因为你的remove（）调用链接在一个转换）。但是，如果数据表示尚未从DOM中删除，则enter（）选择将不包含该数据，因为它已经存在！但是，您的转换将继续执行，您的数据表示将消失，而不会有机会重新输入。

What's going on is that data representation "re-enters" before it has been removed from the DOM (because your remove() call is chained on a transition). However, if the data representation hasn't been removed from the DOM yet, the enter() selection will not contain that data because it already exists! And yet, your transition will continue to execute, and your data representation will disappear without having the chance to "re-enter".

您需要做的是给退出元素某种标识符。例如：

What you need to do is give the exiting elements some sort of identifier. For example:

g.exit().classed('exiting', true);

然后，当您更新选择时，如果元素重新输入，则取消退出转换并将其恢复到其原始状态：

Then, when you update your selection, if an element "re-entered", cancel the exiting transition and bring it back to its original state:

g.filter('.exiting')
    .classed('exiting', false)
    .transition() // new transition cancels the old one so that remove() isn't called
        .attr('foo', 'bar'); // return to original state

我已经调整了你的小提琴以演示解决方案：http://jsfiddle.net/hX5Tp/

这里是一个拆开的小提琴来演示问题（和解决方案）： http://jsfiddle.net/xbfSU/

Here's a stripped down fiddle to demonstrate the issue (and solution) clearly: http://jsfiddle.net/xbfSU/

这篇关于D3.js：停止转换中断？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！