Chained transitions may interrupt prior ones #54

devison · 2016-08-22T20:09:21Z

Hi,

It seems that when transitions are chained together using transition.transition, a subsequent transition may interrupt the prior one. This was unexpected to me, since I was expecting them to run sequentially. (I was experimenting with staged animations and was observing that sometimes only the second part of the animation happened).

I've isolated this to a simple example:

<!DOCTYPE html>
<html>
    <body>
        <script src="https://d3js.org/d3.v4.min.js"></script>
        <script>

            var n = 300, radius = 5, spacing = 2;

            var width = (n * spacing + 2 * radius), height = 600;

            var svg = d3.select('body').append('svg')
                    .attr('width', width).attr('height', height);

            for (var i = 0; i < n; ++i)
                svg.append('circle');

            // create red circles at top:
            var circles = svg.selectAll('circle')
                    .style('opacity', 0.2)
                    .style('fill', 'red')
                    .attr('r', radius)
                    .attr('cx', function (d, i) {
                        return radius + i * spacing;
                    })
                    .attr('cy', radius);

            function getIndex(d, i) {
                return i;
            }

            function logInterrupt() {
                console.log('first transition interrupted!');
            }

            // transition circles to blue over varying durations, then move to bottom:
            circles.transition().duration(getIndex).style('fill', 'blue').on('interrupt', logInterrupt)
                    .transition().duration(2000).attr('cy', height - radius);

        </script>
    </body>
</html>

Also see here: https://jsfiddle.net/onjtpp4y/2/

In chrome and firefox I see the first part of the row of circles remains red and I see multiple interrupted messages in the console. Is that expected?

I can imagine why this happens, but would it make more sense to make chained transitions strictly sequential?

Regards,
Dan

p.s. thanks for awesome library

The text was updated successfully, but these errors were encountered:

mbostock · 2016-08-22T20:24:43Z

I think this qualifies as a bug, but it appears to be triggered only when the prior transition has an extremely short duration, such as zero. If you increase the duration (say the index plus 50ms), the interrupts go away.

devison · 2016-08-22T20:50:16Z

Thanks very much for fast response.

Yep. Fyi, in my actual app the delay on the first transition is a few hundred ms, yet this issue occurred with a large number of svg elements. (A user on a slower computer reported some data not displaying correctly).

mbostock · 2016-08-22T21:10:07Z

That’s plausible; if the browser stalls temporarily, it could cause a similar situation.

The problem here is the optimization in d3/d3#1576 (see also #16): the first tick is deferred to the end of the current frame, so the following transition starts before the preceding transition can end naturally, triggering the interrupt.

devison · 2016-08-23T07:18:43Z

Fantastic - thanks very much!

mbostock self-assigned this Aug 22, 2016

mbostock closed this as completed in 1170d27 Aug 22, 2016

mbostock added a commit that referenced this issue Aug 22, 2016

Better test for #54.

a464ffd

mbostock mentioned this issue Aug 23, 2016

Transitions can get stuck at STARTED. #55

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Chained transitions may interrupt prior ones #54

Chained transitions may interrupt prior ones #54

devison commented Aug 22, 2016 •

edited

mbostock commented Aug 22, 2016

devison commented Aug 22, 2016 •

edited by mbostock

mbostock commented Aug 22, 2016

devison commented Aug 23, 2016

Chained transitions may interrupt prior ones #54

Chained transitions may interrupt prior ones #54

Comments

devison commented Aug 22, 2016 • edited

mbostock commented Aug 22, 2016

devison commented Aug 22, 2016 • edited by mbostock

mbostock commented Aug 22, 2016

devison commented Aug 23, 2016

devison commented Aug 22, 2016 •

edited

devison commented Aug 22, 2016 •

edited by mbostock