D3.js .join() DOM ordering with key functions

Data Join Ordering Semantics

In D3 v6 and v7, the .join() method streamlines the enter-update-exit pattern. When a key function is provided to the data join, D3 matches data points to existing DOM elements based on the returned key value rather than the array index.

Ordering Uncertainty

A critical design consideration arises when the order of the input data array changes between updates. While new elements are appended to the selection, it is unclear if .join() automatically reorders existing DOM elements to mirror the new sequence of the data array when a key function is utilized.

This behavior impacts visualizations where the DOM order determines the z-index (layering) of SVG elements or the sequence of CSS transitions.

• Does .join() preserve the original DOM position of matched elements?
• Is the resulting DOM order guaranteed to match the data array order regardless of the key function?