Why aren't g elements behaving as expected when D3 data is updated?

I'm having trouble with D3's general update pattern not appending and updating as expected; I have provided 2 codepens that compare the binding of data using .data(data, d => d) and .data(data, d => d[input]), which is the only differing factor between the two - please refer to the codepens for a complete visual reference.

Codepen 1

Codepen 2

For context, the chart itself contains spin cycle class data per seat, sorted by ascending seat number. The DOM elements the data are bound to is structured as follows:

<svg>
> g.seat_0
>> rect.bar
>> text.measurement

> g.seat_1
>> rect.bar
>> text.measurement

.
.
.

> g.seat_n
>> rect.bar
>> text.measurement
</svg>

Each group represents a seat and contains a rect and text element. The initial data reads for d.total_power, but the dropdown allows you to select a metric of interest corresponding to a key, with the updated value reflected in the width of the rect.bar and text.measurement upon selection.

Both do not behave as expected:

• In the case of (1) data(d => d), the first bar itself is updated with the rest being entered and appended, which is the expected behaviour.
• In the case of (2) data(d => d[input]), namely for Total power and Total calories options, there are a handful seats being entered and appended versus all transitioning to their updated value, which is the expected behaviour.
  These issues aren't observed in Average speed or Total distance and selecting either in the dropdown demonstrates the expected behaviour of the chart.

You can refer to both the fill and the seat number appended on the lefthand side to narrow down the anomolies. Newly appended elements are filled with orange and updated elements are filled with red. I've also noticed it's the same seats that are acting up.

• For case (1), the very first seat.
• For case (2) in d.total_power seats 31, 43, 44, 47, 51; d.total_calories seats 29, 35, 51.

Essentially my questions are:

• Why are some of these bars not behaving (appending + entering, updating) as expected? I went over the data and it looks consistent, so it isn't an issue with the object.
• I understand that .data(d => d) joins the entire object to the group. Why is it that when we join using this method do all elements are entered and appended on a new dropdown selection vs being updated when we specify the join using .data(d => d[input])?

The problem here is just a misunderstanding regarding what's the correct returned value from a key function. Here's what the documentation says, emphasis mine:

> A key function may be specified to control which datum is assigned to which element, replacing the default join-by-index, by computing a string identifier for each datum and element.

You have to return a string, and a string which uniquely identifies each element.

That said, let's see what's happening:

1. When you do d => d you're using '[object Object]' as the unique identifier, which is obviously wrong.
2. When you do d => d[input], let's say total_calories, you're using the total calories value for each element as their unique identifier, and obviously that's not unique.

Therefore, as each bar represents a seat, the correct key function seems to be just this:

.data(data, d => d.seat);