Why is calling .select() changing my bound data? - d3.js

Question

In my mental model of d3, calling .select() should not change what data is bound to selections.
I've been encountering a case where calling .select() and passing it a function changes the bound data and I would appreciate an explanation of what's wrong with my mental model.
Here's a minimal case:
// Setup
let body = d3.selectAll('body')
let exampleData =
[
{_id:"groupOne", items:['one','two']},
{_id:"groupTwo", items:['three','four']}
];
// Add some divs
body.selectAll('div').data(exampleData).enter().append('div');
// Add some p children of the divs
body.selectAll('div').selectAll('p').data((d)=>d.items).enter().append('p').text((d)=>d);
// Issue
console.log(body.selectAll('div').data()); // data is the same as exampleData
body.selectAll('p').select(function(){return this.parentNode}); // Select parents of all p
console.log(body.selectAll('div').data()); // Data is now ["two","four"]
and here is a live version on bl.ocks.org .

Answer 1

From the documentation of d3: https://github.com/d3/d3/wiki/Selections#select
If the current element has associated data, this data is inherited by the returned subselection, and automatically bound to the newly selected elements.
So you select the p elements with body.selectAll('p') which has data ["one,"two","three","four"] (this data is inherited by the returned subselection, and automatically bound to the newly selected elements.)
Then you make a subselection with .select(function(){return this.parentNode});
The subselect will 'iterate' 4 times.
Which will be the div with:
<div><p>one</p><p>two</p></div> for the first two
and <div><p>three</p><p>four</p></div> for the last two.
For the first iteration; parentNode <div><p>one</p><p>two</p></div>,
will get(inherit) data "one".
The second iteration: data "two".
In the 3rd iteration; parentNode <div><p>three</p><p>four</p></div>,
will get data "three".
And four the 4th iteration: data "four".
However, I think what you're trying to do is something like this:
body.selectAll('p').select(this.parentNode); // Select parents of all p
console.log(body.selectAll('div').data()); // Data is now the same as exampleData
(Without the return statement)