D3.js: Не начинайте новый переход до завершения предыдущего?

Question

Я использую график D3 рядом с Google Map. Я хочу, чтобы график переключался всякий раз, когда изменяется масштаб карты. Он отлично работает, если масштаб не изменяется быстрее, чем переход завершен. Тем не менее, дважды нажмите дважды, что приведет к сломанным переходам.

Как я могу остановить следующий переход, начинающийся до завершения предыдущего перехода?

Это мой код (это Backbone приложение):

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 
    }) 

Если вы ищете точный момент, который заканчивается переход, вы можете попробовать добавить в .each («конец», слушатель) для перехода(), который будет вызывать слушатель по истечению срока перехода. Transitions#Control. Сделать код выглядит примерно так?

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

Надеюсь, это поможет.