跟我一起学习 D3.js：选择元素并将其添加到 DOM（第 1 篇）。
添加元素
欢迎来到我的 D3.js 入门系列教程，在这里你可以和我一起学习 D3！本系列博客文章旨在整理我的学习心得，并与大家分享知识。欢迎在评论区分享你的学习技巧和心得。
介绍
今天我们将介绍 D3.js 究竟是什么，为什么要使用它，如何设置它，以及如何使用它与 DOM 交互的一些基础知识。
什么是D3.js？
D3 代表数据驱动文档（Data-Driven Documents）。它是一个专为数据可视化而构建的前端 JavaScript 库。它利用 HTML、CSS 和 SVG，帮助您创建精美的交互式数据可视化效果，并可在任何浏览器中运行。
我为什么要用它？
由于 D3 主要基于 CSS 和 SVG 构建，因此它可能是目前最灵活的数据可视化工具。您可以根据需要制作出交互性强或动画效果丰富的图形——唯一的限制就是您的创造力。
D3 的创建者 Mike Bostock在 Github 的这个图库中有很多示例。
开始之前我应该了解些什么？
在深入学习 D3 之前，你应该对 HTML、CSS 和 JavaScript 的基础知识有扎实的理解。虽然并非绝对必要，但具备一些 jQuery 经验会有所帮助。D3 的语法与 jQuery 非常相似。最后，对几何和 SVG 有一些基本的了解也绝对不会错。本系列教程中我会提供一个非常基础的 SVG 创建速成课程，所以即使你目前还没有掌握这方面的知识也不用担心。
准备工作
使用 D3 最简单的方法是使用其 CDN。
创建一个包含几段文字的HTML模板：
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>D3 Fundamentals</title>
<link rel="stylesheet" href="master.css">
<script src="https://d3js.org/d3.v4.min.js"></script>
</head>
<body>
<p>First Paragraph</p>
<p>Second Paragraph</p>
<p>Third Paragraph</p>
<p>Fourth Paragraph</p>
<p>Fifth Paragraph</p>
<script type="text/javascript" src="index.js"></script>
</body>
</html>
请确保将此脚本标签粘贴到 <head> 标签中：
<script src="https://d3js.org/d3.v4.min.js"></script>
您也可以从这里下载本地副本，并将脚本源属性指向本地路径。
在结束标签之前再创建一个 script 标签</body>。我个人喜欢将脚本与 HTML 代码分开，所以我链接到了一个外部的 index.js 文件。随着代码变得越来越复杂，我建议这样做。不过，现在如果你愿意，也可以直接在 script 标签内编写 JS 代码。
第一步：了解如何在 DOM 中选择和添加元素。
在深入学习制作图表和地图之前，我们应该先了解如何与 DOM 交互。这主要通过选择和添加 HTML 元素来实现。
选择元素
D3 允许您使用以下两种方式选择元素：
d3.select()d3.selectAll()
select 方法接受一个参数——你要编辑的元素。它可以是标签名、类名或 ID。
接下来，我们给段落添加一些非常基础的样式，以便观察不同选择方法的效果。如果您以前没见过这种样式设置方式，也不用担心，我稍后会详细讲解。
使用此方法d3.select('p')只会选中DOM 中的第一个段落元素。注意：如果要选中其他段落，可以在 D3 的 select 方法中使用 CSS 的 nth 选择器。例如，要选中第三个段落，可以运行以下代码d3.select('p:nth-child(3)')。
当然，选中一个元素并不会立即显示任何内容，所以我们来添加一些样式来验证它是否生效。要为选中的元素添加样式，我们使用 `style`style()方法。它接受两个参数：样式属性（在本例中为颜色）和值（在本例中为青色）。D3 支持方法链，所以我们只需在方法所在的同一行继续调用即可select()。
运行后d3.select('p').style('colour', 'teal')应得到以下结果：
然而，该selectAll()方法允许我们选择所有目标元素。
要将所有段落变为青色，我们可以运行d3.selectAll('p').style('color', 'teal')。
这两种方法很可能构成你创建的大部分图表的基础。但我们通常不会直接使用 DOM 中的硬编码元素。更常见的情况是，我们会根据元素反映的数据来选择特定的元素。要动态创建这些元素，我们首先需要知道如何从 JS 文件将它们添加到 DOM 中。
添加元素
将元素添加到 DOM 最终将允许我们根据数据集动态创建元素。我们将使用以下函数来实现这一点：
d3.append()
我们暂时去掉段落，这样就又得到一个空白的HTML模板。首先，我们需要选择要添加内容的元素——在本例中，就是HTML元素body。
这次我们列个清单吧。
d3.select("body")
.append('ul');
我们还可以将该ul元素保存到一个变量中，以便在添加多个元素时更加方便li。这在代码变得更加复杂时，有助于保持代码的整洁。
const ul = d3.select('ul');
ul.append('li')
ul.append('li')
ul.append('li')
此时，你应该看到三个项目符号。但它们没有任何文本——要添加文本，我们可以使用该text()方法，这是另一个我们以后会经常用到的便捷函数。你也可以使用此方法来更新元素中已有的文本。
ul.append('li').text('first');
ul.append('li').text('second');
ul.append('li').text('third');
最终结果应该是这样一份看起来相当枯燥的清单。
添加属性
D3 中最广泛使用的方法之一是属性方法，用于添加 HTML 标签属性：
ul.attr()
attribute 方法接受两个参数：要添加的属性（例如 class、id、width、height 等）和值。
当我们开始使用 SVG 并需要为可视化效果指定 x 和 y 属性时，这将特别方便。它在样式设置方面也非常有用。例如，我们可以通过运行 `.` 为无序列表添加一个名为“list”的类ul.attr('class', 'list')。然后，您可以在单独的 CSS 文件中为其设置特定样式，或者在 JS 文件中使用 `.` 选中它d3.select('.list')进行进一步编辑。
概要
尽管最终结果可能有些乏味，但我们已经涵盖了学习 D3 的一些关键的第一步：
- 什么是 D3 以及为什么要使用它。
- 在新项目中设置 D3。
- 如何使用
select()和选择 DOM 元素selectAll()。 append()如何使用.向DOM添加元素- 如何使用
attr().向元素添加HTML属性 - 将选择结果保存到变量中。
- 使用该
text()方法向元素添加文本。
下次我们将讲解如何将数据绑定到 DOM 元素。这才是真正令人兴奋的地方，因为这意味着可以动态加载数据！😱
您可以随意尝试创建和设计不同的元素。
文章来源：https://dev.to/ellen_dev/learn-d3-with-me-selecting-and-appending-elements-to-the-dom-post-1-8i3