D3.js：直到前一個完成纔開始新的轉換？

Question

我在Google Map旁邊使用D3圖形。我希望圖形在地圖縮放變化時進行轉換。如果縮放比轉換完成更新沒有變化得更快，它就可以正常工作。但是，連續兩次單擊縮放會導致轉換失敗。

如何在上一次轉換完成之前停止下一次轉換？

這是我的代碼（這是一個主幹應用程序）：

render: function() { 
     this.renderMap(); 
    }, 
    renderMap: function() { 
     var that = this; 
     ... 
     google.maps.event.addListener(that.mapControl, 'zoom_changed', function() { 
     that.change(); 
     }); 
    }, 
    change: function() { 
     var that = this; 
     d3.transition().duration(750).each(function() { 
     that.redraw(); 
     }); 
    }, 
    redraw: function() { 
     ... 
     this.redraw = function() { 
     ... 
     var barUpdate = d3.transition(bar).attr("transform", function(d) { 
      return "translate(0," + (d.y0 = y(d.State)) + ")"; 
     }).style("fill-opacity", 1); 
     }; 
    } 

Answer 1

在你的代碼來看，我認爲你可能能夠通過增加基於索引的延遲來分隔過渡。

.transition() 
    .duration(750) 
    .delay(function(d, i){ 
     return i * 750 
    }) 

如果你正在尋找一個過渡結束的確切時刻，你可以嘗試添加的。每個（「結束」，聽衆）的過渡（），它會調用監聽器在一個過渡的結束。 Transitions#Control。讓代碼看起來像這樣？

.transition() 
    .duration(750) 
    .each("end", that.redraw()) 

希望這會有所幫助。