D3 - Maintaining Sort on Data Change - d3.js

Question

I'm ripping my hair out trying to figure this out.
I have a table being refreshed via WebSocket. It feeds an object with frequency counts. The key is a term. The value is a count. I take this and convert it to an array of arrays, where the top level array contains arrays of the format [key, value]. This works.
I sort and slice the array to get the Top 10. This works.
I feed this 2-dimensional array into d3.
d3.select('#table').select('tbody').selectAll('tr').data(dataArray, (element) => {
return element[0];
});
Now, first of all, I can't print this to peek at the update selection. Not on Chrome. Not on Firefox. No access to the selection data, just the _groups which does not include the exit() elements in the same place so there's no way to verify. But, fine. Whatevs.
I do this:
const enterRows = selection.enter().append('tr')
enterRows.append('td').classed('key', true).text((element) => { return element[0]; });
enterRows.append('td').classed('value', true);
enterRows.merge(selection).select('.value').text((element) => { return element[1]; })
selection.exit().remove();
At this point, the rows aren't ordered. I would expect them to be ordered. But they're not. Fine. Whatever.
selection.order();
Does nothing.
What do I do?
EDIT:
Here's a sample of the array as it goes into data():
[['B': 5], ['C': 3], ['A': 2]]
I can make no sense of the resulting table row order.
I just want to preserve the incoming array order.

Answer 1

enterRows.merge(selection).order() does the trick. No idea why it's necessary since ordering is supposed to be stable, but it does.