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

用 D3 给文档添加元素

我们有许多的方式给文档添加元素，那么使用 D3 是如何简单便捷的添加的呢？

介绍

D3 有多种方法可以用来在文档中增加元素、修改元素。

D3 多为函数式编程，调用方式大量采取链式调用。

select() 方法从文档中选择一个元素。 它接受你想要选择的元素的名字作为参数，并返回文档中第一个与名字匹配的 HTML 节点。select() 方法支持css选择器语法，当选择一个不存在的元素式，它将不会有任何反应。 以下是一个例子：

const anchor = d3.select("a");

上面这个例子找到页面上的第一个锚点标签，将它作为一个 HTML 节点保存在变量 anchor 中。 你可以使用其他方法进行选择。 示例中的 d3 部分是对 D3 对象的引用，通过它访问 D3 方法。

另外两个有用的方法是 append() 和 text() 。

append() 方法接收你希望添加到文档中的元素(标签)作为参数。 它将 HTML 节点附加到选定项目,附加时总是按照尾插法，并返回该节点的句柄。

text() 方法可以设置所选节点的文本，也可以获取当前文本。 要设置该值，请在方法的括号内传递一个字符串作为参数。

// text 获取文本
let text = d3.select("#app").text()

// text 设置文本
d3.select("#app").text("你好世界")

下面的例子是选择一个无序列表，添加列表项和添加文本：

d3.select("ul")
  .append("li")
  .text("Very important item");

实操

使用 select 方法选择文档中的 body 标签。 然后给它 append 一个 h1 标签，并给 h1 元素添加文本 Learning D3

判断标准：

1. body 元素应该包含一个 h1 元素。
2. h1 元素应包含文本 Learning D3。
3. 你应该能访问 d3 对象。
4. 你应该使用 select 方法。
5. 你应该使用 append 方法。
6. 你应该使用 text 方法。

<script>
    d3.select("body").append("h1").text("Learning D3")
</script>

用 D3 选择一组元素

介绍

selectAll() 方法选择一组元素。 它以 HTML 节点数组的形式返回该文本中所有匹配所输入字符串的对象。 以下是一个选择文本中所有锚标签的例子：

const anchors = d3.selectAll("a");

像 select() 方法一样，selectAll() 也支持链式调用，你可以在它之后调用其他方法。

实操

选择所有的 li 标签，通过 .text() 方法将它们的文本改为 list item。

1. 页面上应该有 3 个 li 元素，每个元素的文本内容应为 list item。 大写和间距应完全匹配。
2. 应该能访问 d3 的对象。
3. 应该使用 selectAll 方法。

d3.selectAll("li").text("list item")