Jumps in Chained Transitions Because of Long Computational Time at the Start and End Event Callbacks of the First Transition

This example shows that:

• A long computational time in the start event callback of a transition causes the transition to jump.
• If a long computational time in the end event of the first of two chained transitions is not accomodated for as a delay in the second, the transition jumps. The solution to this problem is to add a delay to the second transition that is equal to or larger than the computational time. See that solution in action here.

Timeline:

• 0 s:
  • A small red rectangle is drawn
  • The first transition is scheduled to start at 2 s and end at 6 s
  • The second transition is scheduled to start at 6 s (after the first) and end at 10 s
• 2 s:
  • The first transition starts and calls its event callback
  • The first transtion end event callback returns after wasting 2 s
  • The small rectangle should starts to grow to a medium size rectange, but doesn’t
• 4 s:
  • The first transition starts 2 seconds too late, causing the transition to jump
• 6 s:
  • The first transition ends and calls its event callback
  • The rectangle should start to grow to a large rectangle and fade to blue, but doesn’t
• 8 s:
  • The first transtion end event callback returns after wasting 2 s
  • The second transition starts 2 seconds too late, causing the transition to jump
• 10 s:
  • The second transition ends

Open the console if you want to see timestamped events during the transitions.

Note: a bug in d3-timer that is fixed, but at the time of this writing not yet released, requires this example to use a non official d3-timer.min.js.