为什么当enter()被链式调用时，D3.js数据仅对子节点可用，而不是单独调用

我正在尝试遵循迈克·博斯托克 (Mike Bostock) 的说法似乎表明是最佳实践，即分配你的selectAll()到一个变量，然后分离出更新，enter()和exit()，但我注意到 V4 中有一个我无法解释的差异。

考虑以下工作代码：

// Bind an array of users to the #users div
        var userNodes = d3.select("#users").selectAll("li")
            .data(d3.values(users))

            // Add LIs for any new users
            .enter()
                .append("li");

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

它创建一个空的 LI，然后在其中附加一个带有用户名的 SPAN。 （顺便说一句，如果这就是我想要的，我确信有更好的方法，但这只是为了说明我的观点而减少了其他内容。请耐心等待。）

现在我尝试通过运行以下命令来使其适应我对上述最佳实践的解释enter()针对存储的变量，子元素将失去与父数据的链接。我得到了一个空 LI 列表。

// Bind an array of users to the #users div
        var userNodes = d3.select("#users").selectAll("li")
            .data(d3.values(users));

        // Add LIs for any new users
        userNodes.enter()
            .append("li");

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

Update 1

嗯，读完之后[~杰拉尔多·弗塔多]的回应，我以为我已经得到了。显然我在这里遗漏了一个基本原则。

这是我尝试使用的代码merge()确保数据被传递到子元素，但没有任何乐趣：

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);

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

我想你正在使用 d3 v4.x。在这种情况下，这就是预期的行为。

这就是正在发生的事情：userNodes是数据绑定变量：

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

然后，你写：

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

这就是“输入”选择。

在 d3 v3.x 中输入选择神奇地修改你的原始变量，将其变成这样：

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

但是，在 d3 v4.x 中，原始变量仍然只是数据绑定选择：

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

所以，如果我们重写你的userMessageGraph考虑到链接，这就是它的实际情况：

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; });

您可以看到“输入”选择<li>，这是...

.enter()
.append("li")

...不见了。

EDIT:此编辑解决了 OP 的新代码：

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);

这行不通是有原因的：merge功能...

...返回一个新的选择，将该选择与指定的其他选择合并。返回的选择具有相同数量的组和相同的父项this选择。 （强调我的）

As userNodes是一个空选择，这将不起作用。您可以反转逻辑：

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;
    });