mbostock/d3 — Issue #474: transitions fail in bar chart example
Author: djmitche
Created: 2012-01-28 23:36:32+00:00
State: open

Tweaking the last bar-chart example to play with transitions, I've run into a few problems. Here's the code:

function redraw3() {

var rect = chart3.selectAll("rect")
.data(data, function(d) { return d.time; });

rect.enter().insert("rect", "line")
.style("opacity", 0.5)
.attr("x", function(d, i) { return x(i + 1.5) - .5; })
.attr("y", function(d) { return h - y(d.value) - .5; })
.attr("width", w)
.attr("height", function(d) { return y(d.value); })
.transition()
.duration(1000)
.attr("x", function(d, i) { return x(i) - .5; })
.style("opacity", 1.0);

rect.transition()
.duration(1000)
.attr("x", function(d, i) { return x(i) - .5; });

rect.exit().transition()
.duration(1000)
.attr("x", function(d, i) { return x(i - 1) - .5; })
.style("opacity", 1.0)
.remove();

}

And here's what it's doing:

1. In both FF11 and Chrome, the exited rects (a) do not get removed and (b) stack up in reverse order behind the rects still representing live data, for what seems like a random number of steps. That is, the rectangle I expect to slide off to the left and be removed instead stays put. The next rectangle slides to the *right* of that one, and the next to the right of that, and so on. This will continue for some number of steps - sometimes zero, sometimes only a few, and sometimes it fills the whole display.

2. If you change tabs away from the page and back, it seems to stack up the transitions and try to run them all at once. Maybe this is a problem with the animation-frame interface, since you won't get an animation frame when the tab is not visible? This problem occurs even for http://mbostock.github.com/d3/tutorial/bar-2.html

3. All of the bars are opacity=0.5 until they exit, despite the transition to opacity 1.0 on enter. The x transition seems to work fine. I've had problems with other sorts of enter transitions in my own experiements, which was what led me to try to reduce this case from the documentation.