鉴于 D3 是一个 JavaScript 库，我们自然倾向于将 D3 方法与本机 JavaScript 函数结合起来来访问和操作数据。D3 现在完全支持 JavaScript 的 ECMAScript 2015 或 ES6 修订版以及大多数最新更新。D3 还作为模块提供，可以集成到我们构建 Web 项目所用的最新框架和库中。使用这些模块通常是首选方法，因为它不会污染我们应用程序的全局范围。

在本节中，我们将简要讨论这些技术及其在 D3 生态系统中的作用。由于 SVG 知识是理解 D3 的基础，因此我们将花时间更详细地解释您开始构建可视化所需理解的基础知识。如果您已经熟悉 HTML、SVG 元素、CSS、JavaScript 和 JavaScript 模块，请随意浏览或跳至第 1.3 节。

1.2.1 HTML 和 DOM

与 GIF 动画和框架成为网络动态内容顶峰的时代相比，我们已经走过了很长一段路。在图 1.8 中，您可以看到为什么 GIF 从未在强大的基于 Web 的数据可视化中流行起来。GIF 与设计用于使用 VML（矢量标记语言）的 infoviz 库一样，对于早期浏览器来说是必需的，但 D3 是为不再需要向后兼容性的现代浏览器而设计的。

图 1.8 20 世纪 90 年代的一些例子，比如dpgraph.com，仍然存在，让我们想起动画 GIF 无处不在的时代。

当您登陆网页时，要加载的第一个文件是超文本标记语言或 HTML 文件，如下例所示。浏览器解析 HTML 文件以构建文档对象模型或 DOM，这是用于 Web 文档的编程接口。我们经常将其称为 DOM 树，因为它由一组嵌套元素（也称为节点或标签）组成。在我们的示例中，和 the元素是父元素的子元素。同样，标签是、the和标签的父标签。标题也是该元素的同级元素。当您加载网页时，您在屏幕上看到的是标记中包含的元素。

  
      
    
  
  
    
I am a title
    

      
I am a paragraph.
      
I am another paragraph.
    
  

在 DOM 中，每个元素的三类信息定义了其行为和外观：样式、属性和特性。样式决定颜色、大小、边框、不透明度等。属性包括类、id 和交互行为，尽管某些属性也可以确定外观，具体取决于您正在处理的元素类型。对于 SVG 元素，属性用于设置不同形状的位置、大小和比例。属性通常指的是状态，例如复选框的“checked”属性，如果该框被选中，则该属性为 true；如果该框未被选中，则该属性为 false。尽管术语“属性”和“属性”经常互换使用，但它们是两个不同的东西。呈现 DOM 时，属性显示为初始状态。属性是元素的当前状态，并且可以随着用户与界面交互而改变。在第2章中，我们将讨论用于生成或修改HTML和SVG元素的样式和属性的D3方法。

DOM 还决定元素在屏幕上的绘制顺序，子元素在父元素之后和内部绘制。尽管 CSS 属性z-index使我们能够部分控制传统 HTML 元素绘制到屏幕上的顺序，但 SVG 元素严格遵循它们在 DOM 中出现的顺序。根据画家的模型，之后绘制的内容出现在之前绘制的内容之上。

1.2.2 SVG——可缩放矢量图形

可扩展矢量图形 (SVG) 的引入确实改变了网络的面貌。几年之内，SVG 图形成为主要的 Web 开发工具。光栅图形（PNG 和 JPG）由微小的像素组成，当我们放大得太近时，这些像素就会变得可见，而矢量图形则是通过数学和几何图形构建的。它们在任何尺寸和任何屏幕分辨率下都能保持清晰的外观。SVG 图形的另一个显着优势是它们可以直接注入 DOM，允许开发人员操纵其元素并为其设置动画，并使屏幕阅读器可以访问它们。如果构建正确，SVG 也具有高性能，其文件大小仅为等效光栅图像的一小部分。

当使用 D3 创建数据可视化时，我们通常将 SVG 形状注入 DOM 并修改其属性以生成组成可视化的视觉元素。了解 SVG 的工作原理、主要 SVG 形状及其表示属性对于大多数 D3 项目至关重要。

如何访问代码文件

本书的每一章都包含旨在支持您的学习体验的代码练习。我们强烈建议您“做”这本书，而不仅仅是“读”这本书，这意味着在阅读章节时完成练习。通过这种方式，您将保留更多信息，并很快就能构建自己的 D3 项目！

对于每个练习和项目，您都可以访问现成的代码文件。您可以在本书的 Github 存储库（
https://github.com/d3js-in-action-third-edition/code-files）上找到它们。如果您熟悉 Git，则可以将存储库克隆到您的计算机上。您还可以下载压缩文件。

从 Github 存储库下载代码文件

每一章都有自己的文件夹，其中包含一个或多个练习，按照每章中的部分编号。练习包括一个start文件夹，其中包含入门所需的所有文件。您将在文件夹中找到练习的完整解决方案end。当您完成一章的各个部分时，您可以继续在上一部分使用的文件中进行编码，或者使用专用于该部分的文件夹重新开始。两种选择都会导致相同的结果。

让我们开始探索矢量图形。转到本书提供的代码文件。找到end中的文件夹
chapter_01/SVG_Shapes_Gallery并右键单击该文件index.html。在菜单中，转到打开方式并选择浏览器。我们建议使用 Chrome 或 Firefox，因为它们具有出色的检查器工具。该文件将在新的浏览器选项卡中打开，并且将出现您在图 1.9 中看到的矢量图形。您还可以在 Github 托管项目 (
https://d3js-in-action-third-edition.github.io/svg-shapes-gallery ) 上查看这些 SVG 形状。

图 1.9 我们将在本节中构建的基本 SVG 形状图库。

您正在查看的 SVG 图形包含创建 D3 可视化时最常使用的形状：线条、矩形、圆形、椭圆形、路径和文本。

使用 D3 时，您通常会告诉库应将哪些形状附加到 DOM。您还负责了解需要计算哪些表示属性才能使形状具有您正在寻找的尺寸、颜色和位置。在下面的练习中，您将编写创建图 1.9 中每个 SVG 元素的代码。我们将此练习称为SVG 形状图库。之后，您将了解入门所需的所有 SVG 基础知识。

在您选择的代码编辑器中打开练习文件夹index.html中的文件。我们推荐VS Code，这是一个免费、易于使用的代码编辑器，并且具有多种功能，对前端开发很有帮助。startSVG_Shapes_Gallery

正如您所看到的，index.html是一个简单的 HTML 文件。如果您在浏览器中打开此文件（右键单击该文件并在“打开方式”菜单中选择浏览器），您将只会看到一个空白页面。这是因为该元素为空。在接下来的小节中，我们将向此元素添加 SVG 形状。

清单 1.1.a SVG 形状库练习的起始 HTML 文件

哪里可以找到更多信息

以下部分将介绍多个 SVG 元素及其属性。作为开发人员，我们在构建项目、使用我们不熟悉的 SVG 元素或寻找 JavaScript 函数来执行特定操作时严重依赖在线资源。在前端开发中，MDN Web Docs (
https://developer.mozilla.org/ ) 始终是可靠且全面的资源。它包含 HTML 元素及其属性、CSS 属性和 JavaScript 函数的易于理解且通常可编辑的示例。

响应式 svg 容器

在 SVG 图形的世界中，容器是在其上绘制所有内容的白板。每个 SVG 形状都嵌套在。在浏览器中重新加载页面。目前还看不到任何东西。

打开浏览器的检查器工具（在浏览器窗口中右键单击并选择“检查”）。在检查器窗口中，您将看到组成页面的 DOM。找到容器，也称为 SVG 节点。当您在检查器中将鼠标移到它上面时，SVG 元素会在页面上突出显示。您可以在图 1.5 中看到此效果。

图 1.10 在 DOM 树中选择并在视口中突出显示的 SVG 节点

默认情况下，浏览器为 SVG 容器提供宽度300px和高度。150px但我们也可以使用属性来分配这些值。属性用于提供有关 HTML 元素的附加信息。对于内联 SVG，我们主要使用属性来设置组成 SVG 图形的元素和形状的大小和位置。

例如，我们可以设置SVG 容器的宽度和高度属性。返回到文本编辑器，并将 awidth和 aheight属性添加到 SVG 容器。将它们的值设置为900和300并保存文件。

在浏览器中重新加载项目并在检查工具中找到 SVG 节点。请注意，宽度和高度属性现在显示在 SVG 容器的括号内。如果将鼠标移到检查工具 DOM 树中的 SVG 节点上，您还会看到视口中的 SVG 容器现在的大小为 900 像素 x 300 像素。

图1.11 SVG节点采用其属性指定的大小

为了帮助我们查看 SVG 容器，而不必从检查器中突出显示它，让我们给它一个边框。向 SVG 容器添加样式属性并插入 CSS 边框属性。在下一个代码片段中，我们使用 border 速记属性创建一个宽度为 1px 的黑色实心边框。

保存文件，重新加载页面并确认 SVG 容器周围有边框。现在，调整浏览器窗口的大小，直到它小于 SVG 容器。您将观察到 SVG 容器保持固定的宽度和高度，并且不适应浏览器窗口的大小。让我们尝试使 SVG 容器具有响应能力。

之前，我们将 SVG 属性设置为绝对值 (900和300)，浏览器将它们解释为以像素为单位的测量值 (900px和300px)。但我们也可以使用百分比。在文本编辑器中，将宽度属性更改为相对值“ 100%”，保存文件并重新加载页面。

再次调整浏览器大小，并注意 SVG 如何获取可用的完整宽度并保持 300 像素的固定高度。这更好，但我们失去了原来的纵横比。

为了使内联 SVG 具有响应能力，我们可以使用viewBox 属性。在代码编辑器中，从 SVG 容器中删除width和属性，并将它们替换为属性。给它一个值。heightviewBox"0 0 900 300"

再次调整浏览器窗口的大小。你注意到了什么？SVG 容器现在可以适应任何屏幕尺寸，同时保持其纵横比为 900:300。我们有一个响应式 SVG！

正如您所注意到的，viewBox 属性由四个值的列表组成。前两个数字指定 viewBox 坐标系的原点（x 和 y）。在本书中，我们将始终使用0 0，但很高兴知道这些值可用于更改 SVG 容器的哪一部分在屏幕上可见。viewBox 属性的最后两个数字是其宽度和高度。它们定义 SVG 的纵横比，并确保其完美缩放以适合任何容器而不变形。

安装在容器内是这里的关键。到目前为止，我们的内联 SVG 的容器是 HTML元素，它通常会扩展以适应浏览器的视口。如果视口变得非常大，SVG 也会变得非常大。通常，我们希望 SVG 具有最大宽度，以便它不会大于页面上的其余内容。为此，请将 SVG 容器包装在宽度为 100%、最大宽度为 1200px 的 div 内。为简单起见，我们将这些属性设置为内联样式，但在实际项目中，这些属性将来自 CSS 文件。请注意，我们还添加了值边距“ 0 auto”，以使 SVG 在页面上水平居中。

尝试再次调整浏览器的大小，看看我们的 SVG 如何优雅地适应任何屏幕尺寸，同时尊重其容器的最大宽度。该策略有助于将 D3 可视化注入响应式网页，我们将在本书中使用它。

svg坐标系

既然我们知道了如何使内联 SVG 具有响应性，那么解决 SVG 形状在 SVG 容器内的定位方式就很重要了。SVG 容器就像一张白纸，我们可以在上面绘制矢量形状。矢量形状是根据基本几何原理定义的，并参考 SVG 容器的坐标系进行定位。

SVG 坐标系与笛卡尔坐标系类似。其 2D 平面使用两个垂直轴来确定元素的位置，称为 x 和 y。这两个轴源自SVG 容器的左上角，如图 1.12 所示。意思是y轴的正方向是从上到下。记住这一点可以让你避免一些头痛！

图1.12 SVG容器的坐标系和元素的位置

为了在 SVG 容器内定位元素，我们从左上角的原点开始向右移动。这将为我们提供元素的水平 (x) 位置。对于垂直 (y) 位置，我们从顶部开始向下移动。这些位置由每个 SVG 形状的表示属性定义。

现在，我们将了解您在构建 D3 项目时经常遇到的 SVG 形状。我们还将讨论它们的主要表现属性。这里的目标绝不是编写 SVG 提供的所有形状和功能的综合指南，而是涵盖支持您的 D3 之旅的基础知识。

数据可视化技巧：几何基元

出色的艺术家可以用矢量图形绘制任何东西，但您可能不会因为您是一名艺术家而关注 D3。相反，您正在处理图形并考虑更务实的目标。从这个角度来看，理解几何基元（也称为图形基元）的概念至关重要。几何基元是简单的形状，例如点、线、圆和矩形。这些形状可以组合成更复杂的图形，特别方便直观地显示信息。

基元对于理解您在现实世界中看到的复杂信息可视化也很有用。树形布局，就像我们将在第 10 章中构建的那样，当您意识到它们只是圆形和直线时，它们就不那么令人生畏了。当您将交互式时间线视为矩形和点的集合时，它们更容易理解和创建。即使是主要以多边形、点和线形式出现的地理数据，当您将其分解为最基本的图形结构时，也不会那么混乱。

线

线条元素可能是所有 SVG 形状中最简单的。它获取两个点的位置，设置为属性，并在它们之间绘制一条直线。返回到该index.html文件，并在 SVG 容器内添加一个元素。声明其属性x1和y1并分别赋予它们值 50 和 45。这意味着我们的线的起点位于(50, 45)SVG 容器的坐标系中。如果从 SVG 容器的左上角开始，向右移动 50 像素，向下移动 45 像素，您将遇到线条的起点。(140, 225)同样，使用属性x2和y2将线的端点设置为。

图1.13 在SVG容器的坐标系中定位线元素

如果您保存并重新加载项目，您的线条将不可见，您可能想知道发生了什么。为了使 SVG 线条在屏幕上可见，我们还需要设置其描边属性，该属性控制线条的颜色。border 属性的值与 CSS color 属性类似。它可以是颜色名称 ( black, blue, ...)、RGB 颜色 ( rgb(255,0,0)) 或十六进制值 ( #808080)。向您的线条添加笔划属性，并为其指定您选择的颜色（我们使用黑色）。现在它应该在屏幕上可见。

如果我们想设置线条的宽度，我们可以使用描边宽度属性。此属性接受绝对数字（转换为像素）或相对值 (%)。例如，以下行的 a 为stroke-width3px。如果stroke-width未声明该属性，浏览器将应用默认值 1px。

打开浏览器的检查器工具并找到 SVG 节点及其包含的行。双击其中一个属性，更改其值并观察新值如何修改线的起点或终点。花时间尝试不同的值，以确认您了解属性x1、y1、x2和如何y2影响线条的位置和长度。

-20现在，为属性赋予 值x1。你看到线的起点是如何消失的吗？落在 SVG viewBox 之外的任何形状或形状部分在屏幕上都不可见。不过，该元素仍然存在于 DOM 中。我们可以访问和操纵它。如果 SVG 中的某个元素不可见，并且您不知道为什么首先要检查它是否在 SVG viewBox 之外！请记住，您始终可以通过使用开发人员工具检查 DOM 来找到它。正如我们之前所做的那样，如果将鼠标移到检查器工具中的元素上，即使它位于 SVG viewBox 之外，它也会在视口中突出显示。

图 1.14 SVG 线在 SVG 容器外部时部分隐藏

笔记

为了提高效率，大多数 SVG 元素只需要一个自闭合标签（我们使用 而不是 ）。与其他一些 HTML 标签一样，SVG 元素的固有结构在自闭合标签中提供了所有必需的信息。这对于 SVG 文本元素有所不同，其中文本放置在开始标签和结束标签之间。

长方形

顾名思义，矩形元素在屏幕上绘制一个矩形形状。该元素需要四个属性才能可见。属性x和y声明矩形左上角的位置，而属性width和height分别控制其宽度和高度。在 SVG 容器中添加以下元素及其属性。

在我们的示例中，矩形的左上角位于SVG 容器原点的260px右侧和下方。25px它的宽度为120px，高度为60px。与其他位置属性一样，我们可以使用百分比而不是绝对数字来设置它们的值。例如，如果我们将该width属性设置为50%，则矩形将扩展到 SVG 容器宽度的一半。

图 1.15 在 SVG 容器的坐标系中定位矩形并调整其大小

您可能已经注意到我们的矩形充满了黑色。默认情况下，浏览器对大多数 SVG 形状应用黑色填充。我们可以通过设置fill属性并为其指定任何 CSS 颜色来更改该颜色。如果我们想给矩形添加边框，我们添加一个描边属性。图 1.16 显示了一些示例。请注意，如果不声明属性，则矩形周围不会绘制边框stroke。另外，在最后一个矩形中，属性fill-opacity和border-opacity用于使fill和stroke半透明。与 CSS 中一样，不透明度可以设置为绝对值 ( 0.3) 或百分比 (30%）。与填充和描边相关的所有属性也可以从 CSS 文件设置或修改。

图 1.16 应用于矩形 SVG 形状的不同样式属性

如果您希望矩形具有圆角，则只需添加rx和ry属性，分别是水平和垂直角半径。这些属性接受绝对值（以像素为单位）和相对值（百分比）。例如，下面矩形的每个角的半径都是 20px。将此矩形添加到您的形状库中。

此时，您可能想知道 SVG 中是否有一个可以绘制正方形的元素。我们不需要一个！在 SVG 中，我们通过赋予元素相等width和height属性来绘制带有元素的正方形。例如，以下元素将绘制一个 60px x 60px 的正方形。也将它添加到您的形状库中。

作为参考，我们的形状库中现在有三种类型的 SVG 矩形：经典矩形、圆角矩形和正方形。为了好玩，我们给了它们颜色#6ba5d7并玩弄它们stroke和fill属性。请注意，只有笔划在正方形上可见，因为其fill属性值为transparent或none。您的矩形应该类似于图 1.17 中的矩形，除非您更改了它们的属性（我们鼓励您这样做）！

图1.17 三种SVG矩形

SVG笔画的位置

当您尝试在可视化中对齐形状时需要记住的一点是，笔划是均匀地绘制在 SVG 形状的内部和外部边界上的。如下图所示，如果矩形的width属性为 40px，则应用 ofstroke-width会1在视觉上向矩形的左侧添加 0.5px，向右侧添加 0.5px（而不是像我们本能地认为的那样，向每边添加 1px） ），实际总宽度为 41px。如果stroke-width是2，它会在每边添加 1px，依此类推。

笔划宽度对 SVG 形状实际宽度的影响

圆和椭圆

圆形形状经常用于数据可视化。它们自然地吸引眼球，并使可视化感觉更加友好和有趣。我们使用元素绘制 SVG 圆圈。其所需属性是圆心的位置 ( cx , cy ) 及其半径 ( r )。圆的半径是从圆心到其边界上任意点所绘制的直线的长度。将以下圆圈添加到您的形状库中。将其中心定位于(530, 80)并为其指定 50px 的半径。

图 1.18 在 SVG 容器的坐标系中定位圆和椭圆并调整其大小

您还可以使用圆形的填充和描边属性。为了生成图 1.18 中的效果，我们使用了透明填充和 3px 的描边，颜色为#81c21c。

类似地，元素需要形状中心位置的属性 ( cx, cy)。圆形具有恒定的半径，而椭圆形的半径则不同，从而使其具有扁平形状。我们通过声明水平半径 ( rx ) 和垂直半径 ( ry ) 来创建这种扁平化效果。将下一个片段添加到您的图库中。它将在圆下方绘制一个椭圆，水平半径为 50px，垂直半径为 30px。

路径

SVG路径是迄今为止所有 SVG 元素中最灵活的。它们在 D3 中广泛用于绘制几乎所有无法用迄今为止讨论的形状基元之一（直线、矩形、圆形和椭圆形）表示的复杂形状和曲线。

d我们通过声明其属性（代表“draw”）来指示浏览器如何绘制路径。该d属性包含一个命令列表，从开始绘制路径的位置到要使用的曲线类型，直到指定我们是否希望路径成为闭合形状。例如，将以下路径元素添加到您的库中。在此示例中，d属性以M680 150开头，表示“移动到坐标(680, 150)”。然后我们从当前点 (680, 150) 到字母 C 后面的第三个坐标 (755 150) 指定的端点绘制一条三次贝塞尔曲线。三次贝塞尔曲线需要控制点，即字母 C 后面、起点和终点之间的坐标（(710, 80) 和 (725, 80)）。这些控制点定义了曲线的陡峭程度。然后我们有字母 S，它代表“停止”。它的工作原理与字母 C 类似，只不过它通向曲线的端点。这里最后一条曲线的起点是(755 150)，终点是(840, 150)，控制点是(810, 220)。曲线可以由一个或两个控制点定义。

图 1.19 一个简单的 SVG 路径及其控制点

要深入了解 SVG 路径，请参阅 MDN 的教程：
https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths。

手动编写d属性对于简单的形状是可行的，但随着形状变得复杂而变得乏味。幸运的是，D3 具有强大的形状生成器，我们将在第 4 章中讨论。

关于路径要记住的另一件重要的事情是浏览器将以黑色填充它们，除非我们将它们的fill属性设置为noneor transparent。即使路径未闭合（如我们的示例中所示），情况也是如此。

文本

line

line

circle

  
  rect

  
  rect

  line
  circle
  ellipse
  path

  line
  circle
  ellipse
  path

 [...] 

  

    
  

 ... 
 ... 

.my-class {
  font-size: 16px;
  font-family: serif;
}
 
In the DOM:
 ... 

let car = new Car().putOnHood().putOnWheels().putOnTires().putOnLights();

const mySelection = d3.selectAll("div");
const myParagraphs = mySelection.append("p");
const myParagraphsWithAClass = myParagraphs.attr("class", "my-class");
const myParagraphsWithText = myParagraphsWithAClass.text("Wow");
const mySpans = myParagraphsWithText.append("span");
const mySpansWithText = mySpans.text("Even More Wow")
const myBoldSpans = mySpansWithText.style("font-weight", "900");

d3.selectAll("div").append("p").attr("class", "my-class").text("Wow")
   ? .append("span").text("Even More Wow").style("font-weight", "900");

d3.selectAll("div")
  .append("p")
    .attr("class", "my-class")
    .text("Wow")
  .append("span")
    .text("Even More Wow")
    .style("font-weight", "900");

const arrayOfNumbers = [17, 82, 9, 500, 40];
const arrayOfStrings = ["blue", "red", "yellow", "orange"];

arrayOfNumbers[0]   // => 17
arrayOfStrings[2]   // => "yellow"

arrayOfNumbers.length;                      // => 5
arrayOfStrings[arrayOfStrings.length - 1]   // => "orange"

arrayOfNumbers.includes(9)         // => true
arrayOfStrings.includes("pink")    // => false
arrayOfStrings.includes("ellow")   // => false

const row1 = {
               id:"1",
               name:"Zoe",
               position:"Data analyst",
               works_with_d3:false
             };

row1.name            // => "Zoe"
row1.works_with_d3   // => false

row1["position"]                      // => "Data analyst"
 
const myProperty = "works_with_d3";
row1[myProperty]                      // => false

const data = [
 {id:"1", name:"Zoe", position:"Data analyst", works_with_d3:false},
 {id:"2", name:"James", position:"Frontend developer", works_with_d3:true},
 {id:"3", name:"Alice", position:"Fullstack developer", works_with_d3:true},
 {id:"4", name:"Hubert", position:"Designer", works_with_d3:false}
];

data.forEach(d => {
  d.id = +d.id;
});

data.map(d => d.name);   // => ["Zoe", "James", "Alice", "Hubert"]

data.filter(d => d.works_with_d3);
 
// => [
   {id:2, name:"James", position:"Frontend developer", works_with_d3:true},
   {id:4, name:"Hubert", position:"Designer", works_with_d3:true}
  ];

data.find(d => d.id === 3);
 
// => {id:"3", name:"Alice", position:"Fullstack developer", works_with_d3:true}