前言：
现时看官们对“js文件夹是什么文件夹”可能比较关怀，大家都需要分析一些“js文件夹是什么文件夹”的相关知识。那么小编在网摘上网罗了一些对于“js文件夹是什么文件夹””的相关资讯，希望大家能喜欢，姐妹们一起来学习一下吧！本章涵盖为D3项目设置本地开发环境从 DOM 中选择元素将 HTML 或 SVG 元素添加到选区设置和修改DOM元素的属性和样式
现在我们已经确定了 D3 的角色及其工具生态系统，是时候开始工作了！在本章中，我们将为第一个可视化奠定基础，同时学习如何使用 D3 操作 DOM（文档对象模型）。
DOM 操作是任何 D3 项目的根源，并且您将在本章中学习的技术可能是您作为 D3 开发人员最常使用的技术。首先，我们将介绍选择，它允许我们从 DOM 中获取单个或多个元素。您会发现 D3 使选择变得非常简单和直观。然后，一旦我们做出选择，我们就会想用它做一些事情。我们在 D3 项目中经常执行的一项操作是将 HTML 或 SVG 元素添加到选择中。例如，为了创建可视化效果，我们经常将 SVG 形状附加到 SVG 容器内。最后，我们调整这些 SVG 形状的位置、大小和颜色。我们通过设置它们的属性和样式来做到这一点。
由于本书重点关注在本地开发环境中构建项目，因此在我们深入研究 D3 技术之前，您需要拥有一个。在 2.2 节中，我们将解释如何使用 VS Code 及其 Live Server 扩展在几分钟内准备好本地环境。
2.1 您的第一个 D3 可视化
在本章和下一章中，您将开发第一个 D3 可视化：如图 2.1 所示的条形图。尽管我们在第 1 章中提到 D3 不一定是制作简单、经典图表的最有效工具，但条形图非常适合介绍 D3 的基本概念。坚持使用我们，很快您就会拥有坚实的基础，使您能够轻松构建复杂的可视化。
我们的条形图背后的数据来自数据可视化协会 ( datavisualizationsociety.org )主办的2021 年数据可视化 - 行业状况调查。
图2.1 数据可视化从业者最流行的技术。我们将在本章中开始构建这个条形图。
2,181 名数据可视化从业者（从专业人士到学生再到业余爱好者）回答了 2021 年行业状况调查。我们将可视化调查中一个问题的答案：“您经常使用哪些技术来可视化数据？”，受访者可以从预定义列表中选择所有适用的工具。在图 2.1 中，您可以看到生成的条形图，其中工具垂直列出，每个条形的长度代表选择该工具的受访者数量。根据这项调查，D3 跻身数据可视化工具前 10 名。让我们开始吧！
2.2 准备环境
在开始使用 D3 之前，我们需要决定在哪里构建和运行我们的项目。我们可以使用在线代码编辑器，例如 Observable ( observablehq.com ) 或 Codepen ( codepen.io )，这些选项非常适合快速测试和共享代码。但由于本书的目标是帮助您准备好将 D3 项目发送到网站和 Web 应用程序中，因此我们将选择本地开发环境。
现在，如果设置开发环境的想法让您感到畏缩，请不要担心。那种需要花半天的时间流汗、哭泣的日子已经一去不复返了。借助现代工具，您的整个设置第一次不会超过几分钟，之后只需单击按钮即可启动并运行。
此时，您可能想知道为什么我们不能简单地使用浏览器打开 HTML 文件，就像我们在第 1 章中的 SVG 形状库练习中所做的那样。虽然这种方法有时可以很好地工作，但最终会导致浏览器拒绝执行具体任务和抛出错误。出于安全原因，某些浏览器阻止使用 JavaScript 加载本地文件，而是需要通过 Web 服务器加载它们。由于在 D3 项目中，我们通常需要加载数据文件，因此我们确实需要一个 Web 服务器。
在本书中，我们将使用代码编辑器Visual Studio Code（也称为 VS Code），通常与其 Live Server 扩展结合使用，后者提供本地 Web 服务器。但如果您已经有了首选设置，请随意使用它并跳至第 2.2.1 节。
笔记
我们将在本书第一部分中使用的项目结构非常简单，而且有点老式。我们的目标是让环境尽可能简单，以便您可以专注于学习 D3。但是，如果您是一名更高级的开发人员并且希望使用基于模块的项目，那么您完全可以这样做。有关通过 npm 安装 D3 并将库导入文件的说明，请参阅第 8 章的开头（第 8.2 节）。
VS Code 在开发人员中广受欢迎。它是免费、开源、易于使用且功能强大的。它具有内置的 Git 命令（无需在侧面打开终端窗口！）并且高度可定制。如果您的计算机上尚未安装 VS Code，可以从 Visual Studio Code 官方网站（）下载。拥有 VS Code 后，您将需要安装其Live Server 扩展。
如果您需要安装帮助，请参阅附录 A。本附录还包含有关如何使用 Live Server 扩展启动和停止本地 Web 服务器的说明。
笔记
如果您还没有下载代码文件，请在本书的 Github 存储库 ( ) 上下载。从现在到本章结束，我们将使用该chapter_02/start文件夹。如果您在任何时候遇到困难并需要查看解决方案，您可以在该chapter_02/end文件夹中找到它。使用本章的代码文件时，仅打开一个开头或一个结尾代码编辑器中的文件夹。如果您一次打开所有章节的文件并使用 Live Server 扩展来为项目提供服务，则某些路径将无法按预期工作，尤其是当我们将数据集加载到项目中时。代码文件分为多个部分。当我们转到本书中的新部分时，您可以继续处理初始代码文件或从专用于该部分的文件夹重新开始。两种选择都应该导致相同的结果。
2.2.1 我们第一个D3项目的结构
我们将在下一章中处理的 D3 项目都将具有类似的结构，如图 2.2 所示。
图2.2 我们的第一个D3项目的文件夹结构
在项目的根目录下，我们有一个index.html文件，其中包含项目的初始标记。在本书的第一部分中，我们也将在此处将 D3 库、JavaScript 文件和 CSS 文件加载到项目中。
然后我们有三个文件夹：
该/css文件夹包含与项目相关的所有 CSS 文件。虽然本书不重点介绍 CSS，但我们偶尔会使用它。为简单起见，我们还将样式分组到最少量的文件中。但请记住，在专业项目中，CSS 文件夹的结构可能更加复杂，并且通常涉及 SASS 或 LESS 等 CSS 预处理器。该/data文件夹包含我们的数据集。对于条形图，我们的数据集是一个 CSV 文件，其中值用逗号分隔。数据集的每一行都包含一种技术，后面是计数，或者调查受访者选择该技术的次数。最后，该/js文件夹包含我们的 JavaScript 文件。为了简单起见，我们将把 D3 代码写入一个文件main.js. 但稍后，我们将讨论如何将代码拆分为多个文件或组件，以获得更好的可维护性和可测试性。2.2.2 将D3加载到项目中
在开始之前，请通过查看 VS Code 窗口的左下角来检查您的 Web 服务器是否正在运行。它应该显示“端口 5500”，表明服务器正在运行。如果显示“上线”，请单击以启动实时服务器。现在我们已经启动并运行了 Web 服务器，在开始使用 D3 编码之前我们还需要做一件事：将 D3 库加载到我们的项目中。在本书中，我们将使用两种主要方法。第一个是添加一个脚本标签来index.html链接到最新版本的 D3。我们可以使用这种方法加载整个 D3 库或仅加载特定模块。第二种方法是将 D3 作为 NPM 模块加载，主要适合使用 React 或其他 JavaScript 框架构建的站点。
在本章中，我们将选择第一种方法，因为它是最简单的。随着本书的进展，我们将开始使用第二种方法，它更能代表当今专业 D3 项目的构建方式。
在 VS Code 或您选择的代码编辑器中，打开index.html位于文件夹根目录的文件。在结束正文标记 ( </body>) 之前，使用标记加载 D3 库的版本 7，这是撰写本书时的最新版本script。main.js添加另一个脚本标签以加载位于文件夹中的文件/js并保存您的项目。您可以在清单 2.1.a 中了解如何继续。
<script src=";></script><script src="js/main.js"></script>笔记
d3js.org的主页始终包含如何将最新版本的 D3 库加载到项目中的说明和代码片段。
浏览器按照与 中列出的脚本标签相同的顺序读取 JavaScript 文件index.html。我们必须先加载D3库main.js。否则，浏览器将无法访问main.js. 它会抛出错误并且代码不会执行。
我们还希望脚本成为网页上最后加载的内容，因此我们将脚本标签放置在结束正文标签 ( ) 之前</body>。通过这种方法，我们可以减少页面的加载时间，而不必在显示 DOM 之前等待脚本加载。在尝试从脚本文件中操作 DOM 之前，我们还要确保 DOM 可用。
清单 2.1.a 在脚本标签中加载整个 D3 库 - index.html
<!DOCTYPE html><html><head> ... </head><body> <div class="container"> <h1>You are about to start working with D3!</h1> </div> <script src=";></script> #A <script src="js/main.js"></script> #B </body> #C</html>
现在，让我们测试 D3 库和main.js文件是否已正确加载到我们的项目中。在代码编辑器中，转到/js文件夹并打开main.js. 将以下代码片段复制粘贴到 中main.js，然后保存文件。
d3.select("h1").style("color", "plum");在下一节中，我们将详细解释此代码片段中的 D3 方法的用途，但现在，我们假设我们已选择标题 h1 并将其颜色更改为 CSS 颜色名称“plum”。如果你在浏览器中查看你的项目，标题的颜色应该已经改变，如图 2.3 所示。
图2.3 D3修改的标题颜色
现在我们已经确认 D3 已加载到我们的项目中，您可以从 中删除片段main.js和 h1 标题index.html。在下一节中，我们将介绍 D3 选择。
2.3 选择元素
在构建 D3 项目时，我们不断地操作 DOM，任何 DOM 操作都是从选择开始的。选择就像从 DOM 中抓取一个元素并准备好进行进一步操作。D3 有两种选择方法：d3.select()和d3.selectAll()。
该方法d3.select()采用选择器作为参数，并返回与该选择器匹配的第一个元素。此方法链接到d3对象并用于选择一个元素。如图2.4所示，选择器参数可以是类属性、id、标签名称或上述的任意组合，就像我们在CSS中使用的选择器一样。
图2.4 select()方法
让我们以图 2.5 所示的虚构 DOM 示例为例。它由一个包含 h1 标题的 div 元素、一个带有 class 的段落元素intro和另一个带有 id 的 div组成viz-container。该 div 将另一个段落和一个 SVG 容器包装在一起。最后，SVG 容器包含三个圆形元素。这些圆圈中的第一个和最后一个有类faded。
图 2.5 一个虚构的 DOM 示例
如果我们想要选择 h1 标题，我们可以使用它的标签名称作为传递给该d3.select()方法的选择器，如下所示：
d3.select("h1");同样，如果我们想选择带有 class 的段落intro或带有 id 的 div viz-container，我们可以使用它们各自的 class 或 id 属性作为选择器。与 CSS 选择器一样，类名前面有一个点 ( .)， ID 前面有一个主题标签 ( #)。
d3.select(".intro");d3.select("#viz-container");我们还可以使用选择器的组合。例如，如果我们想选择 div 内 id 为 的段落元素viz-container，我们在两个选择器之间留一个空格。
d3.select("#viz-container p");需要记住的一件重要事情是，该方法d3.select()仅返回 DOM 中与其选择器匹配的第一个元素。例如，我们的 DOM 示例中有三个圆形元素，如图 2.6 所示。但选择d3.select("circle")只返回第一个，而忽略其他。
图2.6 d3.select()方法返回的DOM元素
那么，如果我们需要在选择中包含多个元素，我们该怎么办呢？这就是我们使用该d3.selectAll()方法的时候。d3.selectAll()工作原理与 类似d3.select()，只不过它返回与其选择器匹配的所有 DOM 元素。例如，如果我们回到虚构的 DOM 示例，d3.selectAll("circle")则返回 DOM 中包含的所有圆形元素。
图2.7 d3.selectAll()方法返回的DOM元素
有时了解这一点也很有帮助，就像在 CSS 中一样，我们可以将多个选择器字符串分组，并用逗号分隔。例如，在下面的代码片段中，我们选择h1类为 的标题和段落intro。
d3.selectAll("h1, .intro");图 2.8 用逗号对选择器进行分组
大多数时候，您需要将您的选择存储到 JavaScript 常量中，以便以后可以重用和操作它们。您可以像使用任何 JavaScript 常量 ( const) 或变量 ( let) 一样存储 D3 选择。
const myCircles = d3.selectAll("circle");2.4 将元素添加到选择中选择固然很好，但如果我们不对它们做任何事情，它们就没有多大用处。D3 中的典型模式是执行选择以将另一个元素附加到其中。尽管普通 JavaScript 已经允许我们附加元素，但 D3 使其变得更加容易。
用于将元素添加到选择的主要 D3 方法是selection.append()。该append()方法添加一个新元素作为选择的最后一个子元素，并采用元素的类型或标签的名称作为参数。
图2.9append()方法
让我们回到我们虚构的 DOM 示例。如果我们想添加一个矩形元素作为 SVG 容器的最后一个子元素，我们首先选择 SVG 容器，然后将追加方法链接到选择。要附加的节点类型（元素）作为参数rect传递给该方法。append()
d3.select("svg").append("rect");图2.10 使用selection.append()方法添加一个元素作为选择的最后一个子元素
我们还可以d3.selectAll("div")选择 DOM 中的每个 div 节点，并向每个节点添加一个段落元素，如图 2.11 所示。
d3.selectAll("div").append("p");图 2.11 当与 d3.selectAll() 结合使用时，append 方法将节点添加到选择的每个元素中。
为了将我们所学到的知识付诸实践，让我们开始构建本章简介中描述的条形图。
确保start第 2 章代码文件的文件夹在代码编辑器中仍然打开，并且本地 Web 服务器正在运行。如果您需要回顾如何使用 VS Code 的 Live Server 扩展启动 Web 服务器，请参阅附录 A。打开该文件index.html并注意它包含一个带有 class 的 div 元素responsive-svg-container。
正如第 1 章中所讨论的，大多数 D3 可视化都是使用 SVG 元素构建的，我们的条形图也不例外。为此，我们需要一个 SVG 容器，用于制作图表的 SVG 形状将放入其中。我们现在将添加这个 SVG 元素。
main.js打开文件夹中包含的文件/js。使用方法d3.select()，选择类为 的 divresponsive-svg-container并在该 div 中添加一个 SVG 元素。由于 div 是空的，因此可以使用append()或insert()方法。它们将具有完全相同的效果。以下代码片段显示了该append()方法如何链接到选择。
d3.select(".responsive-svg-container") .append("svg");保存文件main.js并在浏览器中查看项目。视口中看不到任何变化，但如果打开检查器，您将看到 SVG 元素已添加到 DOM，这正是我们想要的！
图2.12 添加到DOM树的SVG元素
在下一节中，我们将通过给 SVG 一个viewBox属性来使其具有响应能力。
2.5 设置和修改属性
在第一章中，我们广泛讨论了主要的 SVG 元素以及决定其位置和大小的属性。我们还解释说，作为 D3 开发人员，您将需要在代码中设置和修改这些属性。现在是学习如何做的时候了！
可以使用D3方法设置和修改属性selection.attr()，其中“attr”代表“属性”。如图2.13所示，该attr()方法有两个参数，第一个是属性的名称，第二个是属性的值。该值可以直接设置，也可以通过访问器函数设置，我们将在第 3 章中讨论。
图 2.13 attr() 方法
在我们的条形图练习中，围绕 SVG 容器的 div 元素具有类responsive-svg-container。main.css如果您打开文件夹中的文件/css，您将看到此类应用了响应式 SVG 元素容器所需的所有样式，如第 1.2.2 节中所述。这里，容器的max-width属性为 1200px，这也是条形图的最大宽度。
为了让我们的 SVG 容器在适应其容器的同时保持其宽高比，我们只需要设置其 viewBox 属性。我们将使用attr()该方法。正如您在下一个代码片段中看到的，传递给该方法的第一个参数attr()是属性的名称，在本例中为viewBox。请注意该属性名称的“B”字母是大写字母。表示属性区分大小写，必须遵守viewBox属性的驼峰式大小写表示法，以便浏览器识别它。
第二个参数是属性的值viewBox，它是四个数字的列表。前两个数字是viewBox坐标系的原点，位于(0,0)。最后两个数字是 viewBox 的宽度和高度。宽度对应于max-width容器 div 的属性，因此为 1200px，让我们估计高度为 1600px。如果需要的话，我们可以稍后调整。我们的 viewBox 属性的值为"0 0 1200 1600"。
d3.select(".responsive-svg-container") .append("svg") .attr("viewBox", "0 0 1200 1600");设置 SVG 元素的 viewBox 属性，保存main.js并在检查器中查看您的项目。您将看到该viewBox属性已添加到 SVG 元素中，如图 2.14 所示。此外，如果您缩小浏览器的视口，SVG 元素将进行调整，同时保持其纵横比为 1200:1600。
图 2.14 具有 viewBox 属性的 SVG 元素
让我们将最新的代码保存到一个名为svg我们很快就会使用的 JavaScript 常量中。
const svg = d3.select(".responsive-svg-container") .append("svg") .attr("viewBox", "0 0 1200 1600");每次我们使用.append()或.insert()方法向选择添加新元素时，我们都会更改选择返回的元素。例如，当我们重用constant时svg，它不会返回带有类的div responsive-svg-container，而是返回我们添加到其中的SVG容器。
D3 缩进约定
在进一步讨论之前，我们先讨论一下 D3 缩进约定。在我们最后的代码片段中，您可能已经注意到每个链接的方法都写在一个新行上。这样做有助于提高可读性，尤其是当超过 2 或 3 个方法链接在一起时。您可能还注意到该append()方法缩进了两个空格，而 attr() 方法使用了四个缩进空格，因此遵循缩进约定。
在 D3 中，每次我们将新元素附加到选择时，我们都会更新选择所针对的 DOM 元素。当我们设置新添加元素的属性和样式时，适当的缩进可以帮助我们了解属性和样式应用于哪个选择。
D3 缩进约定
当多个元素一个接一个地附加时，缩进约定特别方便。想象一下，添加 SVG 元素并设置 viewBox 属性后，我们将一个 group 元素附加到 SVG 容器中，其类为my-group. 然后，我们将一个矩形元素附加到组中并设置其所需的属性。正如您在上图中看到的，我们需要链接多个方法才能实现这一点。但是，由于缩进约定，链很容易阅读，我们一目了然地看到每个属性应用于哪个选择或元素。
条形图，就像我们正在构建的那样，由矩形组成，而 SVG 矩形是使用元素创建的rect。为了练习选择和attr()方法，我们将在条形图中添加一个矩形，该矩形将代表在调查中选择 D3.js 工具的数据可视化从业者的数量。data.csv如果你打开文件夹中的文件/data，你会发现有414名练习者表示他们经常使用D3。
在 中main.js，首先调用常量svg，它返回 SVG 容器。rect在 SVG 容器内添加一个元素。在下面的代码片段中，我们使用了append()方法来添加 rect 元素，但我们也可以使用方法insert()。保存您的项目并确认该rect元素已添加到 SVG 中。
const svg = d3.select(".responsive-svg-container") .append("svg") .attr("viewBox", "0 0 1200 1600"); svg .append("rect");该rect元素存在于 DOM 中，但在屏幕上尚不可见，因为尚未设置其所需的属性。我们知道 SVG 矩形需要四个属性才能出现在屏幕上。您可以参考 1.2.2 节来回顾这些概念。和x属性y控制矩形左上角的位置。我们(10, 10)暂时将其放置在。矩形的宽度对应于有多少练习者选择 D3 作为工具，即 414，其高度可以是任意数字，我们将使用 16。通过分别给出 414 和 16 的 和 属性值，我们的矩形width将height宽度为 414 像素，高度为 16 像素。这四个属性的值以数字形式传递。
svg .append("rect") .attr("x", 10) .attr("y", 10) .attr("width", 414) .attr("height", 16);最后，矩形的 fill 属性设置为 CSS 颜色名称"turquoise"并作为字符串传递。
svg .append("rect") .attr("x", 10) .attr("y", 10) .attr("width", 414) .attr("height", 16) .attr("fill", "turquoise");请注意我们在这里如何使用缩进约定：当我们追加矩形时创建的新选择使用两个缩进空格，而方法attr()使用四个空格。这样，我们就可以清楚地看出属性已应用于元素rect。
保存项目后，该矩形将在浏览器的视口中可见。
图 2.15 附加到 SVG 容器中的矩形元素
2.6 设置和修改样式
为了使我们的可视化元素具有我们想要的外观和感觉，我们需要能够对其应用样式。传统的 CSS 样式表方法是一种很好的方法，而且通常是出于可维护性目的的更好选择。但有时，直接使用 D3 设置和修改样式属性很方便，特别是当样式旨在表示数据时。
D3允许我们用方法设置和修改元素的样式属性selection.style()。该方法有两个参数。第一个是样式属性的名称，第二个是其值。
图2.16 style()方法
回到我们的条形图练习，在 中main.js，将一个style()方法链接到 SVG 容器选择，该方法存储在名为 的常量中svg。就像下面的代码片段一样，使用该style()方法将边框应用到 SVG 容器。您可以给它任何您想要的值。这里我们使用简写属性来应用宽度为 1px 的黑色边框。
const svg = d3.select(".responsive-svg-container") .append("svg") .attr("viewBox", "0 0 1200 1600") .style("border", "1px solid black");SVG 容器周围的边框将帮助我们可视化我们正在工作的空间。它还将帮助我们理解该style()方法是如何工作的。
保存您的项目并在浏览器中查看它。在 DOM 检查器中找到 SVG 容器。您应该看到在 style 属性中添加了 border 属性，如图 2.17 所示。这意味着该style()方法注入内联样式。
图 2.17 使用 style() 方法应用边框
使用 SVG 元素时，某些样式可以作为属性或使用内联样式应用，例如 和fill属性stroke。没有严格的规则表明我们应该使用 theattr()或 thestyle()方法来应用此类属性，但一些开发人员更喜欢保持一致，并且始终将表示属性应用为 CSS 或内联样式，而不是使用属性。这可能是一个好主意，特别是当我们希望通过将生成形状的代码与指示形状的代码分开来使级联样式易于管理时。在本书中，我们将使用 attr() 和 style() 方法以及外部 CSS 文件来设置 SVG 元素的表示属性。
让我们用一个例子来说明这一点。在 中main.js，将一个style()方法链接到矩形选择，并使用此方法对矩形应用不同颜色的第二个填充。在下面的代码片段中，我们使用 CSS color "plum"。
svg .append("rect") .attr("x", 10) .attr("y", 10) .attr("width", 414) .attr("height", 16) .attr("fill", "turquoise") .style("fill", "plum");现在，打开main.css文件并向矩形添加第三个填充属性。这里我们使用了CSS颜色"orange"。
rect { fill: orange;}图 2.18 填充作为属性、来自永恒样式表和内联样式应用
我们的矩形现在具有三个填充属性，应用方式不同。它有一个 color 填充"turquoise"，作为属性应用，另一个 color 填充"plum"，作为内联样式，最后一个 color 填充"orange"，从外部 CSS 样式表应用。这当然不是我们在现实生活中会做的事情，仅用于演示目的。
保存您的项目并注意使用样式属性应用的填充如何覆盖其他两个。在图 2.19 中，您可以看到如何应用级联样式。内联样式会覆盖任何其他样式，后跟从外部 CSS 样式表应用的样式。填充属性排在最后。牢记这条规则将帮助您制定适合您的习惯、团队和项目的策略，同时避免困惑为什么一种风格在屏幕上可见而另一种风格不可见。
我们现在知道如何执行选择、向 DOM 添加元素以及如何定位它们并设置它们的样式。但是像我们在这里所做的那样将矩形一一添加到我们的条形图中根本没有效率。在下一章中，我们将学习数据绑定如何帮助我们一次添加所有矩形。main.js在我们到达那里之前，请从和 中删除与矩形相关的代码main.css。文件 main.js 现在仅包含清单 2.1.b 中的代码。
清单 2.1.b 第 2 章末尾的 main.js 内容
const svg = d3.select(".responsive-svg-container") .append("svg") .attr("viewBox", "0 0 1200 1600") .style("border", "1px solid black");访问 D3 模块文档D3 包含一系列模块，我们可以独立使用这些模块，也可以根据项目的需要进行组合。每个模块包含多个执行相关任务的方法。
我们在本章中讨论的所有方法都是模块d3-selection ( ) 的一部分。该模块托管在 github 上，是值得信赖且始终最新的资源。
如果您是 Web 开发新手，此类 API 文档一开始可能会令人生畏，但您参考它的次数越多，您就会开始更好地理解其技术语言。
2.7 总结D3 项目需要 Web 服务器才能正常运行。在本地开发环境中访问 Web 服务器的一种快速简便的方法是使用 VS Code 的 Live Server 扩展。有两种方法可以将 D3 库加载到项目中：通过index.html向库链接添加脚本标记或作为 NPM 模块。在本书的第一章中，为了简单起见，我们使用脚本标签方法。D3库可以全部加载，也可以只加载我们需要的D3模块，这样可以提高我们项目的性能。通过脚本标签加载文件和库时，脚本标签列出的顺序与浏览器读取脚本的顺序相同。这意味着链接到 D3 库的脚本标签必须出现在加载我们使用 D3 的 JavaScript 文件的脚本标签之前。否则，浏览器将无法访问 JavaScript 文件中使用的 D3 方法，并且会引发错误。d3.select()在 D3 中，我们可以使用和方法从 DOM 中选择元素d3.selectAll()。第一个方法仅返回第一个元素，而第二个方法则返回与其选择器匹配的所有 DOM 元素。作为参数传递给select()和selectAll()方法的选择器字符串与 CSS 样式表中使用的选择器相同。它们使用标签名称、类名称、id 或这些名称的组合来标识 DOM 元素。该append()方法允许添加一个元素作为选择的最后一个子元素。该insert()方法的工作原理类似，但添加一个元素作为选择的第一个子元素。两种方法都将元素的类型作为参数。该attr()方法用于向元素添加或修改属性。它需要两个参数：属性的名称及其值。该style()方法允许设置和修改 DOM 元素的样式属性。它还需要两个参数：样式属性的名称及其值。通过该style()方法，我们应用内联样式，覆盖从外部 CSS 样式表和表示属性应用的样式。
标签： #js文件夹是什么文件夹 #js实现中断正在执行的方法 #js追加div #js追加内容 #js定位当前位置
