D3 代表数据驱动文档。它是由 Mike Bostock 开发的 JavaScript 库，旨在基于数据操作文档，允许用户使用 HTML、SVG、CSS 和 JavaScript 的 web 标准创建丰富的动态可视化。该库非常发达，在数据分析人员和数据可视化专家中非常受欢迎。
Web 网页的文档资源
为了描述 D3 是如何工作的，首先考虑一下我们所说的术语文档是什么意思。网页是位于 web 服务器上的文档集合。web 服务器在万维网上有一个地址，其他计算机可以导航到该地址。当访问者导航到您的地址时，他们的浏览器将请求一个或多个文档。这些文档向他们的浏览器描述要显示什么、如何显示、从何处获取有助于显示的数据，以及何时执行诸如用户单击之类的事件。一个基本的网页可以包含一系列文本文档，这些文档包含为网页结构（HTML）、页面样式（CSS）和添加动态元素（JS）而编写的代码。网页通常会有许多资源，包括图像，数据和其他补充材料，使页面显示和功能正常。
D3 是如何工作的
使用 D3 时，您正在创建和操作 web 文档中的元素。例如，d3.js 库将在页面中找到一个 div 元素，将一个数据集绑定到它，然后根据数据集中的值设置该元素的属性。例如，它可以基于用户单击或数据集中的更改动态更新元素。
D3 确实是数据驱动的；这意味着 web 页面上的更改是由预期要“绑定”的数据生成的。D3 可以处理网页上找到的任何元素，并通过将数据绑定到该元素并相应地设置该元素的属性来修改它。数据驱动文档。例如，D3 可以用于从一个数字数组生成 HTML 表，或者您可以使用相同的数据创建一个交互式条形图，这些数字相同。连接到这些元素的事件允许与数据交互。
这是什么意思？请看一个示例数据集。D3允许将这些数据附加到文档中的元素。
| City | # of Rats |
|---|---|
| Brookline | 40 |
| Boston | 90 |
| Cambridge | 30 |
| Somerville | 60 |
您将发现自己使用的主要元素是 SVG 图形。SVG 是一种基于 XML 的、web 友好的矢量图像格式。它还提供对动画和交互性的支持。SVG 的独特之处在于，SVG 图像的所有行为和组件都可以使用 JavaScript 和 CSS 访问，就像网页中的任何其他元素一样。
SVG是如何工作的
使用 D3 操作的主要元素类型之一是可伸缩向量图形 SVG。这些页面元素可以位于页面主体中，并且可以像文档对象模型中的任何其他元素一样进行操作。下面显示了 DOM 中三个圆的布局，以及它们在浏览器中的显示方式。
带 SVG 的圆圈：基于三个小圆圈的图表，作者：Mike Bostock
我们开始吧！
在本练习中，您将创建一个图表，该图表将有助于解释通过数据驱动文档的含义。
添加元素
下面是如何在 DOM 中添加新段落。
<script src="https://d3js.org/d3.v6.min.js"></script>
<div id="view"></div>
<script>
d3.select("#view") // select the <body> tag
.append("p") // create and append a <p> tag
.text("Eureka!") // set text content
</script>
更改属性
<script src="https://d3js.org/d3.v6.min.js"></script>
<p id="view2">I'm already here</p>
<script>
d3.select("#view2") // select <p> tag
.style("font-size", "24px") // change font-size to 24px
.style("color", "red") // change color to red
</script>
链式语法
更改属性链接可以帮助您在一行代码中执行多个操作。但是，有时，你需要打破链条，在个别零件上工作。
d3.select("body")
.append("p")
.text("Eureka!")
也可以这样写，显然下面的表述方式没有上面的直观。
var body = d3.select("body")
var p = body.append("p")
p.text("Eureka!")
选择器
D3 选择器是先前定义的元素数组，遵循与 CSS 相同的准则。选择过程允许 D3 从文档中选择元素，这样操作符就可以访问元素，告诉他们做一些事情。D3 有 select() 和 selectAll() 方法分别查找单个或多个 DOM 元素。
<script src="//d3js.org/d3.v6.min.js"></script>
<p>Alpha</p>
<p>Beta</p>
<p>Gamma</p>
<script>
d3.select("p") // select first <p>
.style("font-size", "24px")
.style("color", "red")
</script>
d3.selectAll() 选择文档遍历顺序中的所有匹配元素。
<script src="//d3js.org/d3.v6.min.js"></script>
<p>Alpha</p>
<p>Beta</p>
<p>Gamma</p>
<script>
d3.selectAll("p") // select all <p>
.style("font-size", "24px")
.style("color", "red")
</script>
