CODEWITHSUNDEEP
javascriptd3.js
Richard
Richard

Reputation: 65610

D3.js: Don't start new transition until the previous one has finished?

I'm using a D3 graph alongside a Google Map. I want the graph to transition whenever the map zoom changes. It works fine if the zoom doesn't change faster than the transition has finished updating. However, clicking zoom twice in succession leads to broken transitions.

How can I stop the next transition starting before the previous transition has finished?

This is my code (it's a Backbone app): 

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

Upvotes: 3

Views: 3124

Answers (1)

chrtan
chrtan

Reputation: 1724

Looking at your code, I think that you might be able to separate your transitions by adding a delay based on the index.

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

If you're looking for the exact moment that a transition ends, you can try adding the .each("end", listener) to the transition() which will call the listener at a transition's end. Transitions#Control. Making the code look something like this?

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

Hope this helps.

Upvotes: 4

Related Questions