Apply mapping to attached data - d3.js

Question

I have a bunch of data attached to DOM elements, and I'd like to double each one. My naive approach was to select them all and call data with a function on the selection. I thought this would be sufficient since the data is stored on the elements rather than the selection itself.
However, this doesn't do what I want at all. Bizarrely it results in a selection with the data [undefined] rather than [2, 4, 6] and doesn't affect the data attached to the elements. Even stranger, if I call it with the identity function I get an exception: Cannot read property 'length' of undefined
What's going on here? Does D3 only allow data to be called with a function on an enter/exit selection?
// Create a bunch of elements with attached data.
const selection = d3.selectAll('p').data([1,2,3]).enter().append('p');
console.log(selection.data());
// This doesn't work, but seems like it should:
selection.data(d => d * 2);
console.log(selection.data());
// This throws an exception??
selection.data(d => d);
console.log(selection.data());
// Is this the simplest way that works?
selection.data(selection.data().map(d => d * 2));
console.log(selection.data());
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.13.0/d3.js"></script>

Answer 1

The first two examples you have are quite interesting.
While the first example might seem to be a workable solution:
selection.data(d => d * 2);
console.log(selection.data());
It won't work as expected. First, .data expects an array but it appears as though you are trying to pass each item individually. But also, d here is undefined, the function passed to .data() is called only once, not for each element in the selection. So there are no individual datums to work with in this example (you could have a datum to work with here in a nested selection (see docs)), I've only changed the above to log d and we can see it's undefined:
// Create a bunch of elements with attached data.
const selection = d3.selectAll('p').data([1,2,3]).enter().append('p');
// This doesn't work, but seems like it should:
selection.data(function(d) { console.log(d); return d * 2; })
console.log(selection.data());
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.13.0/d3.min.js"></script>
Why does the second example throw an error while the first doesn't? When multiplying undefined by 2 we get NaN, within the data method the method looks to determine the input data array's length, on NaN length is undefined, on undefined length is an error, I believe this is most likely why one produces and error and the other doesn't:
console.log(NaN.length);
console.log((undefined * 2).length);
console.log(undefined.length);
The non valid lengths also likely explain why no exit selection is created and the data isn't updated: the size of the exit selection is based on the size of the input data array. Data remains unchanged in the first example because within d3-selection the for loop to update the data never loops over the data as the for condition is never met:
for (var i = 0; i < dataLength; ++i) { // bind data
D3 is more designed to bind (new or updated) data to elements rather than to directly manipulate the data bound to those elements. But you can achieve the result you want, either as indicated in your third option, or from the get go with Xavier's comment, alternatively you could write a simple function and pass it to selection.each() (though there are many other solutions too):
// Create a bunch of elements with attached data.
const selection = d3.selectAll('p').data([1,2,3])
.enter()
.append('p')
.each(double);
function double() {
d3.select(this).datum(d => d*2);
}
console.log(selection.data());
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.13.0/d3.js"></script>