javascript - D3.js:在前一个转换完成之前不要开始新的转换？

Question

我正在使用 D3 图表和 Google map 。我希望图表在 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("end", listener) 添加到 transition() ，它将在过渡结束时调用监听器。 Transitions#Control .让代码看起来像这样？

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

希望这对您有所帮助。