Question

我正在使用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中，我都可以确保转换不重叠？

Answer 1

更新：自D3版本3.5（2014年10月）以来，可以通过named transitions使用元素执行并发转换。您只需为每个转换添加一个不同的名称。

Answer 2

正在发生的事情是数据表示在从DOM中删除之前“重新输入”（因为你的remove（）调用是在转换时链接的）。但是，如果尚未从DOM中删除数据表示，则enter（）选择将不包含该数据，因为它已经存在！然而，您的过渡将继续执行，您的数据表示将在没有机会“重新进入”的情况下消失。

您需要做的是为现有元素提供某种标识符。例如：

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

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

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/

Answer 3

在D3中，较新的转换始终会中断并覆盖较旧的转换。您可以使用the each() method within your selection.例如

来解决您的设计问题

d3.select('.animated')
.transition()
.duration(1000)
.attr({
    ... // Change something
})
.each('end', function () {
    d3.select(this)
    .attr({
        ... // Change something else, after previous transition
    });
});

D3.js：停止转换被中断？

3 个答案: