d3 v4 select behaves differently when using a var - d3.js

Question

For some reason, these two code blocks behave differently for their children on the first run:
var date = this.svg.selectAll(".date")
.data(data);
date
.enter()
...
and
var date = this.svg.selectAll(".date")
.data(data)
.enter()
...
In the first example, the subsequent date.selectAll(".bar").data(d => d.animal).enter; has no items in .enter, whereas in the second example, there are items (but the subsequent updates don't work correctly). The even stranger thing is that if I just run the broken block twice, both of my problems are fixed.
When I use the variable, the _groups property is an empty array with the right length (placeholders?). When I chain functions without the variable, the _groups property is an array with the expected elements bound to data. I expected the binding to be done by the end of this block either way, but it's not.
jsfiddle
Side note: if you can help with the animation to start at the bottom only on .enter, that would be incredible

Answer 1

Selections in d3 v4 are immutable. This means that the subselections (to create the rectangles) are:
1: Never operating on the Entered elements
let date = svg.selectAll(".date").data(data);
// date selection/subselections don't contain entered elements
date.enter();
// date selection/subselections STILL don't not contain entered elements
2: Operating on only the Updated parent elements the first time, which are none
let date = svg.selectAll(".date").data(data).enter();
// date selection contains entered, but not updated elements
Solution
I had to reassign the variable used, and merge the parent selection, even though I wasn't doing anything with the Updates from it. Personally I find this pattern to be a little more confusing than v4, and the documentation not giving a great example of this pitfall. It's also awkward to need to assign the variable before/during the .enter just so that you can merge in the Updated elements.
var date = svg.selectAll(".date")
.data(data);
date = date
.enter()
.append("g")
.attr("class", "date")
.attr("transform", d => `translate(${xScale0(d.date)},0)`)
.merge(date);
// date is now a selection that contains both the entered and updated elements
Fixed bars: https://jsfiddle.net/vvag4ycs/4/
Fixed bars & animation: https://jsfiddle.net/vvag4ycs/5/