Javascript 了解D3使用嵌套内容输入、更新和退出选择

在使用D3.js时，我发现我经常希望创建绑定到数据的元素，但由于样式/布局的原因，这些元素位于div和wrappers中。我很难理解嵌套内容和包装器是如何与D3的输入、更新和退出模式一起工作的

基本上，我通常使用JSON数组，为每个要显示的对象提供一些属性

假设我有一组人，每个人都有名字和年龄，看起来像这样：

var array = [
    {
        name: "John",
        age: 31
    },
    {
        name: "Mark",
        age: 29
    },
]

我想用包装器div中的D3列出这些数据：

<div id="wrapper"></div>

我在这方面遇到了一些问题：

第一次运行时不会附加任何段落

如果我有一个事件将另一个人添加到数组中，然后再次运行该事件，我只会看到原始数组中的两个人—John和Mark

如果我将另一个人添加到数组中，issue#2不仅会持续存在，现在还会将段落附加到这些人的包装div中，以便每个人的div中都有重复的内容

---

坦率地说，当我想在包装器和嵌套内容中放置D3元素并在同一级别添加多个子元素，然后在数组更新时更新整个组时，我有点不确定输入/更新/退出选择应该如何工作。如果您对此有任何澄清，我们将不胜感激-谢谢。

您必须重新分配选择：

selection = selection.enter()
  .append("div")
  .classed("person", true)
  .merge(selection);

此外，不能像这样使用第一个参数，必须将函数传递给以下方法：

selection.append("p")
  .html(d=>d.name);

selection.append("p")
  .html(d=>d.age);

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

var数组=[{
姓名：“约翰”，
年龄:31
},
{
名称：“马克”，
年龄:29
},
]
var selection=d3.选择（“包装器”）
.selectAll（“div”）
.数据（阵列）；
选择=选择。输入（）
.附加（“div”）
.classed（“人”，真实）
.合并（选择）；
选择。附加（“p”）
.html（d=>d.name）；
选择。附加（“p”）
.html（d=>d.age）；
selection.exit（）.remove（）

我遇到的第二个问题是，在更新数组时，嵌套元素是重复的。我在这里创建了一个代码笔：它在2秒钟后更新数组，并再次运行显示功能。它正确地显示了新人，但是数组中最初出现的两个人的姓名和年龄增加了一倍。@jrlas请检查第二个片段。
selection = selection.enter()
  .append("div")
  .classed("person", true)
  .merge(selection);

selection.append("p")
  .html(d=>d.name);

selection.append("p")
  .html(d=>d.age);