Why Is D3.js Data Only Available To Child Nodes When Enter() Is Chained, Not Invoked Separately

I'm trying to follow what Mike Bostock seems to indicate is a best practice, namely assigning your selectAll() to a variable and then separating out the update, the enter() and the

Solution 1:

I suppose you're using d3 v4.x. In that case, that's the expected behaviour.

This is what's happening: userNodes is the data binding variable:

var userNodes = d3.select("#users").selectAll("li")
    .data(d3.values(users));

Then, you write:

userNodes.enter()
    .append("li");

And that's the "enter" selection.

In d3 v3.x that enter selection magically modifies your original variable, turning it into this:

var userNodes = d3.select("#users").selectAll("li")
    .data(d3.values(users));
    .enter()
    .append("li");

However, in d3 v4.x, your original variable remains just a data binding selection:

var userNodes = d3.select("#users").selectAll("li")
    .data(d3.values(users));

So, if we rewrite your userMessageGraph taking into account the chaining, this is what it really is:

var userMessageGraph = d3.select("#users")//here userNode starts
    .selectAll("li")
    .data(d3.values(users))//this is where userNode ends
    .selectAll("span")
    .data(function(d){ return [d.name]; })
    .enter().append("span")
    .text(function(d){ return d; });

You can see that the "enter" selection for the <li>, which is...

.enter()
.append("li")

...is missing.

EDIT: This edit addresses the OP's new code:

var userNodes = d3.select("#users").selectAll("li")
    .data(d3.values(users));

// Add LIs for any new users
userNodes.enter()
    .append("li")
    // New for V4, merge back the original set to get the data
    .merge(userNodes);

That won't work for a reason: the merge function...

...returns a new selection merging this selection with the specified other selection. The returned selection has the same number of groups and the same parents as this selection. (emphasis mine)

As userNodes is an empty selection, this will not work. You can invert the logic:

var userNodes = d3.select("#users").selectAll("li")
    .data(d3.values(users));

var userNodesEnter = userNodes.enter()
    .append("li");

var userNodesUpdate = userNodesEnter.merge(userNodes);

var userMessageGraph = userNodesUpdate.selectAll("span")
    .data(function(d) {
        return [d.name];
    })
    .enter().append("span")
    .text(function(d) {
        return d;
    });