Question

我在谷歌地图旁边使用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（），它将在转换结束时调用侦听器。 Transitions#Control。使代码看起来像这样？

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

希望这有帮助。

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

1 个答案: