相关疑难解决方法(0)

我正在和D3.js一起工作 我有很好的转换工作,但我只有一个问题:如果第二次转换在第一次转换结束之前开始,

这是一个证明问题的JSFiddle:http://jsfiddle.net/kqxhj/11/

它在大多数情况下都能正常工作 - 随着数据的变化,CDG和LAX会被追加和删除 - 但如果你快速连续点击两次按钮,你会发现新的元素没有出现.

这是我的代码的核心:

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 - 我不明白为什么会这样.

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

每个人都知道更新/进入/退出模式：

function update(data) {

  // DATA JOIN
  // Join new data with old elements, if any.
  var text = svg.selectAll("text")
      .data(data);

  // UPDATE
  // Update old elements as needed.
  text.attr("class", "update");

  // ENTER
  // Create new elements as needed.
  text.enter().append("text")
      .attr("class", "enter")
      .attr("x", function(d, i) { return i * 32; })
      .attr("dy", ".35em");

  // ENTER + UPDATE
  // Appending to the enter selection expands the update selection to include
  // entering elements; so, operations on the update selection after appending …