javascript - D3.js：在前一个完成之前不要开始新的过渡？

Question

我在 Google Map 旁边使用 D3 图表。我希望图表在地图缩放发生变化时进行转换。如果缩放没有比过渡完成更新更快地变化，它工作正常。但是，连续单击两次缩放会导致过渡中断。

如何在上一个转换完成之前停止下一个转换？

这是我的代码（它是一个 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() 中，这将在转换结束时调用侦听器。过渡#控制。让代码看起来像这样？

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

希望这可以帮助。