开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第12天，点击查看活动详情

使用 D3 中的数据

介绍

D3 是数据驱动的库。可以使用 D3 的方法将数组形式的数据显示在页面上。数据有多种格式，但这个挑战使用了一组简单的数字。

以数据集为参数，和 append() 方法一起使用，为数据集中的每一个元素对象创建一个 DOM 元素。

第一步是让 D3 知道数据。 data() 方法选择连接着数据的 DOM 元素，数据集作为参数传递给该方法。

常见的方法是在文档中为数据集中的每一个数据创建一个元素。为此，你可以使用 D3 的 enter() 方法。

当 enter() 和 data() 方法一起使用时，它把从页面中选择的元素和数据集中的元素作比较。如果页面中选择的元素较少则创建缺少的元素。

以下是一个选择 ul 元素并根据添加的数组创建新的列表项的例子。

<body>
  <ul></ul>
  <script>
    const dataset = ["a", "b", "c"];
    d3.select("ul").selectAll("li")
      .data(dataset)
      .enter()
      .append("li")
      .text("New item");
  </script>
</body>

选择不存在的 li 元素似乎有些难以理解。这段代码告诉 D3 先选择页面上的 ul 元素，再选择所有的列表项，它将返回空。然后 data() 方法接收数组作为参数，并运行三次后面的代码，每次对应数组中的一个对象。 enter() 方法发现页面中没有 li 元素，但是需要 3 个（每个对应 dataset 中的一个数据）。新的 li 元素被追加到 ul，文本为 New item。

实操

选择 body 节点，然后选择所有的 h2 元素。让 D3 为 dataset 数组中的每一个对象创建并添加 h2 标签。 h2 标签的文本为 New Title。你应该使用 data() 和 enter() 方法。

文档应该有 9 个 h2 元素。
h2 元素的文本应为 New Title。大小写和空格必须一致。
应该使用 data() 方法。
应该使用 enter() 方法。

<script>
    const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9];

    d3.select("body").selectAll("h2")
    .data(dataset)
    .enter()
    .append("h2")
    .text("New Title")
  </script>

使用 D3 中的动态数据

介绍

你为 dataset 数组中的每一个对象创建了一个新的 h2 元素，但是它们的文本都是相同的 New Title。这是因为你还没有使用和每个 h2 元素关联的数据。

text() 方法以字符串或者回调函数作为参数：

selection.text((d) => d)

上面这个例子中的参数 d 指关联数据集的一个对象。

使用当前示例作为上下文，第一个 h2 元素绑定到 12，第二个 h2 元素绑定到 31，第三个 h2 元素绑定到 22，依此类推。

实操

修改 text() 方法，使每个 h2 元素显示 dataset 数组中的对应值，加上一个空格和字符串 USD。例如，第一个标题应该为 12 USD。

第一个 h2 的文本为 12 USD。
第二个 h2 的文本为 31 USD。
等待中: 第三个 h2 的文本为 22 USD。
等待中: 第四个 h2 的文本为 17 USD。
等待中: 第五个 h2 的文本为 25 USD。
等待中: 第六个 h2 的文本为 18 USD。
等待中: 第七个 h2 的文本为 29 USD。
等待中: 第八个 h2 的文本为 14 USD。
第九个 h2 的文本为 9 USD。

const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9];

d3.select("body").selectAll("h2")
  .data(dataset)
  .enter()
  .append("h2")

  .text(d=>d+" USD");

使用 D3 中的数据&动态数据

使用 D3 中的数据

介绍

实操

使用 D3 中的动态数据

介绍

实操