D3.js 在两个级别上输入/更新/退出，不嵌套

要在相应的集合上执行输入/更新/退出操作，我们可以编写以下代码，由下面的示例进行解释

这里每个数字都出现在

p

节点中

功能更新（数据）{
var text=d3。选择（'body'）
.selectAll（'p'）
.数据（数据）；
text.enter（）
.append（'p'）
.合并（文本）
.text（d=>d）；
text.exit（）.remove（）；
}
更新（[1,2]）；
更新（[3,4,5,6]）；
更新（[7,8,9]）
由于更新选择引用的是
元素，而不是
元素，请删除
合并（）
方法。当然，这会产生需要重复代码的不良影响（特别是
.text（d=>d）
）：

以下是您的代码和这些更改：


功能更新（数据）{
var text=d3。选择（'body'）
.selectAll（'div'））
.数据（数据）；
text.enter（）
.append（'div'））
.append（'p'）
.text（d=>d）；
text.select（'p'）
.text（d=>d）；
text.exit（）
.remove（）；
}
更新（[1,2]）；
setTimeout（函数（）{
更新（[3,4,5,6]）
}, 1000);
setTimeout（函数（）{
更新（[7,8,9]）
}, 2000);
它并不假定您希望更新
p
标记。您还必须通过更新模式运行它们。我认为这类似于分组条形图示例，其中首先更新组，然后更新条形图。
text.enter()
    .append('div')
    .append('p')
    .text(d => d);

text.select('p')
    .text(d => d);