node-rem | Node REM - NodeJS Rest Express MongoDB | Runtime Evironment library

If I try to remove the bar with index 0, the last bar became red [exited], not the first one, why?

The identifier returned by the key function is not stored on either the DOM node nor the datum. It is evaluated each time you use .data(). Each time you use .data() the key function, if provided, is evaluated for each node in the selection (using the bound datum .__data__, which represents an item in the data array), then D3 iterates through the data array to find a datum to match to the node. If no matching node is found, a node is added to the enter selection with that datum. If after matching all the data, there are excess nodes, they are exited.

Your key function is (d,i)=>i - by removing the first item in your data array there is still an item in the data array with index 0. The data array item with index 0 is matched to the 0th node in the selection. So the first node cannot be exited: it still has a corresponding item in the data array.

Given your key function: this means that the datum originally at index 1 and paired to the node at index 1 is now the datum at index 0 (after splicing) and will be paired with the node at index 0

As your data array is one item shorter than it was, there is one excess node in the DOM. The last node has the highest index, for which there is no matching data array item, so the last node is exited. All nodes except for the last are in the update selection.

Normally you would use a key function to reference the data itself, not its position/index (as that might change due to sorting or other factors, which would then alter which datum is bound to which node). So if your data consists of unique colour names, you'd want to use: .data(data,d=>d) (note: if d is an object, the key function should return a string). This way the same datum is paired to the same node regardless of index. Consequently, splicing a datum from the array will remove the corresponding node it is bound to.

I've created two attempts to visualize the key function, one with a key dependent on the data, one based on a key that is the index. If you look closely when the index key is being used to match datum and element, the datum bound to the element changes: the key is independent of the datum.

Key based on datum

Key based on index

The bl.ocks are a bit rough, I'll probably tweak and incorporate into the answer body here.