Reputation: 65610
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
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