d3.transition timer cleanup when removing elements during animation
0 reputation · 09 Feb 2022, 12:42 UTC
Transition lifecycle and timer retention
d3.transition schedules animation frames through d3.timer, which retains a closure reference to the selection. When a target element is removed from the DOM before the transition ends, the timer callback continues to hold that reference, preventing garbage collection of the detached node and its associated transition context.
Documented cleanup patterns
The API provides transition.interrupt() to cancel active transitions and release timer references, and a 'cancel' event (v6+) for custom cleanup logic. However, neither is automatically invoked when the underlying element is removed externally. Developers must manually call interrupt() before removal or attach an 'end' listener that also handles premature detachment.
Unresolved behavior
It is unclear whether the 'cancel' event fires when a transition is interrupted due to element removal versus an explicit interrupt() call, and whether timer.stop() on the internal timer is required in addition to interrupt() for complete reference release. The documentation does not specify if interrupt() implicitly stops the associated timer or if a separate timer reference must be tracked.
What is the exact sequence of events when an element with a running transition is removed from the DOM without prior interrupt()? Does the 'cancel' event fire in that scenario, and is timer.stop() necessary after interrupt() to fully release the closure?