D3库专注于数据驱动的方法。当您拥有一组数据时，可以应用D3方法在页面上显示它。数据有多种格式，但这一挑战使用了一组简单的数字。第一步是让D3知道数据。 data()方法用于选择DOM元素以将数据附加到这些元素。数据集作为参数传递给方法。常见的工作流模式是在文档中为集合中的每个数据创建一个新元素。 D3为此目的使用了enter()方法。当enter()与data()方法结合使用时，它会查看页面中的选定元素，并将它们与集合中的数据项数量进行比较。如果元素少于数据项，则会创建缺少的元素。下面是一个示例，它选择一个ul元素并根据数组中的条目数创建一个新的列表项：

<BODY>
<UL> </ UL>
<SCRIPT>
const dataset = [“a”，“b”，“c”];
d3.select（ “UL”）。全选（ “礼”）
。数据（数据集）
。输入（）
.append（ “里”）
.text（“新项目”）;
</ SCRIPT>
</ BODY>

选择尚不存在的元素似乎令人困惑。此代码告诉D3首先选择页面上的ul 。接下来，选择所有列表项，返回空选择。然后data()方法检查数据集并运行以下代码三次，对于数组中的每个项目运行一次。 enter()方法看到页面上没有li元素，但它需要3（数据dataset每个数据对应一个）。新的li元素被附加到ul并具有文本“New item”。

选择body节点，然后选择所有h2元素。让D3为dataset数组中的每个项创建并附加h2标记。 h2的文字应该说“新标题”。您的代码应使用data()和enter()方法。

```yml tests: - text: 您的文档应该有9个h2元素。 testString: 'assert($("h2").length == 9, "Your document should have 9 h2 elements.");' - text: h2元素中的文本应该是“New Title”。大写和间距应完全匹配。 testString: 'assert($("h2").text().match(/New Title/g).length == 9, "The text in the h2 elements should say "New Title". The capitalization and spacing should match exactly.");' - text: 您的代码应该使用data()方法。 testString: 'assert(code.match(/\.data/g), "Your code should use the data() method.");' - text: 您的代码应使用enter()方法。 testString: 'assert(code.match(/\.enter/g), "Your code should use the enter() method.");' ```