Smooth Chained Transitions Despite Long Computational Time at the End of the First Transition

This example shows how to accomodate for a long computational time in the end event callback of the first of two chained transitions. The solution is to add a delay to the second transition that is equal to or larger than the computational time. See the problem 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 8 s
  • The second transition is scheduled to start at 8 s (after the first plus a delay of 2 s) and end at 12 s
• 2 s:
  • The first transition starts and calls its event callback
  • The small rectangle starts to grow to a medium size rectange
• 6 s:
  • The first transition ends and calls its event callback
• 10 s:
  • The first transtion end event callback returns after wasting 2 s
  • The second transition starts
  • The rectangle starts to grow to a large rectangle and fade to blue
• 12 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.