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: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?

推荐答案

更新:从 D3 3.5 版(2014 年 10 月)开始，可以通过使用 命名转换.您只需为每个过渡添加不同的名称.

UPDATE: Since the version 3.5 of D3 (October 2014), it is possible to perform concurrent transitions on elements through the use of named transitions. You simply have to add a different name to each transition.

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