When you work with D3, data can change over time, and you need to keep the DOM in sync with these changes. D3 manages this with three selections: enter, update, and exit. The code sample above demonstrates how to handle all three, focusing on updating and removing elements as your data changes.

First, you select the container and bind your initial data array to li elements. D3 checks which data items do not have corresponding DOM elements and creates them in the enter selection. The items.text(d => d); call ensures that any existing li elements are updated with the new data values.

When your data changes (for example, you switch from [10, 20, 30] to [20, 40]), you re-bind the data to the selection. The update selection updates the text content of existing elements to match the new data. However, if there are more DOM elements than data points, some elements are left without data. These are caught by the exit selection. By calling .exit().remove(), you tell D3 to remove these extra DOM elements, ensuring that your list always reflects the current state of your data.

This synchronization process is how D3 efficiently manages dynamic data, letting you focus on describing what the visualization should look like rather than manually tracking DOM changes.