D3 sort() results in weird unexpected behaviour - d3.js

Question

I'm working on a motion chart showing the development of certain data points through time by updating the position and size of the corresponding circle on a chart (similar to https://bost.ocks.org/mike/nations/ ).
Since circles can overlap I need the smallest one to be drawn on top.
In the example this is accomplished by calling selection.sort(), but if I do the same (with the newer D3v4) I get an unexpected behaviour. The sort seems to switch the data objects associated to the visual circle object.
Check this fiddle to see. Run it once as it is (without calling sort(order) in line 45) - this is the expected behaviour. The y value of each object doesn't change so the circles should move on a horizontal line. Now uncomment line 45 to call the sort on each update and run it again. This time the paths of the circles suddenly cross (because the underlying object is switched).
https://jsfiddle.net/orj1rcy8/1/
The API states selection.sort() Returns a new selection that contains a copy .... I assume this is the problem, however I don't understand at this point how the correct approach would look like.

Answer 1

Short answer
You need a key function when you bind your data:
.data(dataForKey(keyIndex), function(d){ return d.name})
Here is your updated fiddle: https://jsfiddle.net/7kyvzkwe/
Long answer
What happened here is that you were victim of what we call object constancy, or, more precisely, not properly setting an object constancy (here is a good reading about it, written by Mike Bostock).
The problem is that, in D3, the data is bound to the elements in their order:
If a key function is not specified, then the first datum in data is assigned to the first selected element, the second datum to the second selected element, and so on.
So, let's see what happened. Your code has three circles, in this order:
The smallest circle, r = 3;
The medium circle, r = 10;
The largest circle, r = 15.
The data is appended in that above-mentioned order. But then, when you do sort(order):
function order(a, b){
return radius(b) - radius(a);
}
You sort the elements, and now you have:
The largest circle, r = 15;
The medium circle, r = 10;
The smaller circle, r = 3.
And then comes the problem: next time you run the next function and bind the new data, you're binding the data to DOM elements in that new order. That is, the data regarding the smallest circle is being bound to the largest circle in the DOM. Using the names of your elements, you're binding the data regarding item1 to the item3 in the DOM (given you have 3 elements, the only one always receiving the correct data is item2).
You can understand this better in the next fiddle. In this next fiddle, I'm using exactly your code, uncommenting the sort function. But, unlike your original code, here I'm changing the order of the data, so we have the largest circle first, then the medium, then the smallest:
[{name:"item1", x:1, y:2, z:15},
{name:"item2", x:1, y:4, z:10},
{name:"item3", x:1, y:6, z:3}];
You can see that, even calling sort, the circles stay in their positions. Here is the fiddle: https://jsfiddle.net/9p1tL43j/
That happens because the next time the function next runs, the data for the smallest circle is bound to the smallest circle (in the DOM), and so on...
Thus, in a nutshell, you need a key function if you want to keep the object constancy. A key function:
... may be specified to control which datum is assigned to which element, replacing the default join-by-index.