d3-transition

https://github.com/d3/d3-transition

Table of Contents

The Life of a Transition discussion

  1. Immediately after creating a transition
  2. You may configure the transition using methods such as transition.delay, transition.duration, transition.attr and transition.style.
  3. Methods that specify target values (such as transition.attr) are evaluated synchronously
  4. Methods that require the starting value for interpolation, such as transition.attrTween and transition.styleTween, must be deferred until the transition starts.
  5. Shortly after creation, either at the end of the current frame or during the next frame, the transition is scheduled.
  6. When the transition subsequently starts, it interrupts the active transition of the same name on the same element, if any, dispatching an interrupt event to registered listeners.
  7. The transition then dispatches a start event to registered listeners.
  8. When a transition ends, it invokes its tweens a final time with a (non-eased) t-value of 1.0.
  9. It then dispatches an end event to registered listeners.
  10. After ending, the transition is deleted from the element, and its configuration is destroyed.

Trigger a callback which uses the end state of transition howto

As trigger.remove() is registered like any other end listeners(link), some end listeners are triggered before trigger.remove() runs.

To prevent from triggering end listeners before removing, We need to use transition chaining:

const t = d3.transition().duration(100)
// Use t to define transitions

// `t.transition()` is another transition which starts right after `t`
const tt = t.transition().duration(100);
tt.on('end', callback);