本章旨在概述 D3.js 能够实现的一些简单功能，同时帮助你更好地理解如何将图像添加到网页中以及如何对其进行操作。

大致来说，我们将探讨如何声明并添加对象（如圆形、矩形、线条甚至文本），如何修改它们相对于页面的属性（位置、大小、形状和行为），以及如何应用其样式（颜色、宽度和透明度）。

在讲解不同元素可应用的各种变化时，部分功能会存在交叉重叠，因此会有少量重复内容。请耐心阅读。目标是让每个部分都独立完整且具有实际可操作性。

框架

为了演示这些相关绘图特性的运作方式，我们需要使用一段简短而简单的脚本，在浏览器中绘制图形。

我们先花一点时间解释一下绘制圆形的脚本。

以下是文件的全部内容：

如果你已经了解 HTML 文件与 JavaScript 的结合方式，可以略过部分内容直接跳转。

该文件的 HTML 部分可视为承载后续 JavaScript 绘图代码的容器。

HTML 部分

以下是 HTML 的内容：

1<!DOCTYPE html>
2<meta charset="utf-8">
3
4<body>
5
6<!-- 加载 d3.js 库 -->
7<script src="https://d3js.org/d3.v6.min.js"></script>
8
9<script>
10 
11</script>
12
13</body>

这段代码由 HTML “标签”构成，用于搭建 JavaScript 运行环境。

第 1 行和第 2 行的标签告诉浏览器当前使用的文档类型以及编码字符集。

代码中的区域已做标注。

例如 body 标签：

1<body>
2
3在此区域内，我们可以放置将在网页上显示的内容。
4
5</body>

以及放置 JavaScript 代码的位置：

1<script>
2
3我们的 d3.js 代码将放在这里。
4
5</script>

我们还加载了一个外部 JavaScript 文件，它包含运行我们代码所需的功能。

1<!-- 加载 d3.js 库 -->
2<script src="https://d3js.org/d3.v6.min.js"></script>

没错，正是这一行加载了 D3.js。一旦加载完成，我们就可以使用它提供的指令来使我们的 JavaScript 代码正常运行。

JavaScript 部分

接下来是允许我们使用 D3.js 提供功能的 JavaScript 代码。

1var holder = d3.select("body") // 选择页面的 'body' 元素
2      .append("svg")           // 在 body 中添加一个 SVG 元素
3      .attr("width", 449)      // 设置 SVG 元素宽度为 449 像素
4      .attr("height", 249);    // 设置 SVG 元素高度为 249 像素
5
6// 绘制一个圆形
7holder.append("circle")        // 添加一个圆形元素
8    .attr("cx", 200)           // 设置圆心 x 坐标
9    .attr("cy", 100)           // 设置圆心 y 坐标
10    .attr("r", 50);            // 设置半径

我将代码分为两个独立块，以增强其功能清晰度。虽然也可以合并为一个块，但这未必更易理解。

第 1 行： 首先，我们在网页上创建一个“容器”用于存放图形，我将其命名为 holder，当然也可以使用其他名称。

在定义 holder 时，第一步是选择页面的 body 元素。（还记得前面 HTML 中的 <body> 标签吗？）

第 2 行： 接着，我们在 body 中附加一个可缩放矢量图形（SVG）对象，并将其设置为宽 449 像素、高 249 像素。

第 3 至 4 行： width 和 height 是 SVG 对象的“属性”，即它们分别描述了该对象的特性。

说实话，我特意将容器尺寸设为不规则数值（不是常见的 450×250），是有原因的。稍后我会为图表添加一个网格，以便观察各元素布局情况，这个尺寸能让网格看起来更美观。

第二段 JavaScript 代码最终完成了圆形的绘制。

第 7 行： 在我们的 SVG “容器”中添加一个新的元素——圆形。

如果你喜欢，可以把 holder 的声明放在 .append("circle") 之前，看作一种简洁的写法。我们完全可以把选择 body、添加 SVG、再添加圆形写成一行长代码。但为了将来能更方便地构建多个对象并进行分组操作，拆分成多步处理是更优方案。

第 8 至 9 行： 设置圆形的中心坐标属性。此处圆心位于 x=200、y=100（即 cx 和 cy）。

第 10 行： 添加半径属性 r，这里设为 50 像素。

绘制圆形所需的三个属性 cx、cy 和 r 是必须的。此外还可以添加其他属性（在后续介绍其他元素时你会逐渐熟悉这些），但以上三项是最基本的。

本节描述绘制圆形的代码，并非为了教你如何画圆，而是展示后续章节代码结构和工作原理的范例。我们即将生成的其他元素，只需替换掉画圆的部分即可，其余代码保持不变。

例如，若将以下代码：

1holder.append("circle")        // 添加一个圆形
2    .attr("cx", 200)           // 设置圆心 x 坐标
3    .attr("cy", 100)           // 设置圆心 y 坐标
4    .attr("r", 50);            // 设置半径

替换为：

1holder.append("rect")          // 添加一个矩形
2    .attr("x", 150)            // 设置左上角 x 坐标
3    .attr("y", 50)             // 设置左上角 y 坐标
4    .attr("width", 100)        // 设置矩形宽度
5    .attr("height", 100);      // 设置矩形高度

那么绘制的就不再是圆形，而是矩形。

因此，我们的圆形如下所示：

为了便于建立统一的参考坐标系，我将元素置于一个类似这样的网格之上：

注意： 网格不会出现在后续讲解的代码中，但我将在另一节详细说明它的生成方式，因为它本身非常有趣。

有了网格之后，就能清楚看到圆形的中心确实位于坐标 (200, 100)，半径为 50 像素。

目前圆形仍显得较为朴素，但请继续跟随下去。随着我们逐步探索样式和属性的应用，将能为图形元素增添更多变化。

在完成上述说明后，我们正式开启探索 D3.js 图形元素的世界之旅。