D3.js - 安装

D3.js - 设置您的开发环境

要开始使用 D3.js 进行开发，您需要一些基本工具和 D3.js 库本身。本章将指导您完成设置过程。

核心组件

D3.js 库: JavaScript 库本身。
文本编辑器 / IDE: 用于编写代码（例如，VS Code、WebStorm、Sublime Text，甚至简单的文本编辑器）。
Web 浏览器: 用于查看您的 D3.js 可视化作品（例如，Chrome、Firefox、Safari、Edge）。
Web 服务器（某些任务建议使用）: 用于提供 HTML 文件服务，尤其是在加载外部数据文件（如 CSV 或 JSON）时，以避免浏览器安全限制。

获取 D3.js 库

您可以通过以下几种方式在项目中使用 D3.js：

1. 使用 CDN (内容分发网络)

这是最快的入门方式。在您的 HTML 文件中包含一个 <script> 标签，指向托管在 CDN 上的 D3.js 文件。这也意味着如果用户访问过使用相同 CDN 链接的其他网站，他们可能会获取到缓存版本。

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>D3.js CDN Example</title>
  <!-- Link to the latest D3.js v7 from d3js.org CDN -->
  <script src="https://d3js.org/d3.v7.min.js"></script>
 </head>
 <body>
  <script>
   // Your D3.js code here
   console.log(d3.version); // Check the D3 version
  </script>
 </body>
</html>

通常建议将您的 <script> 标签（或外部 JavaScript 文件的链接）放在紧靠 </body> 闭合标签之前的位置。这使得 HTML 结构先加载，然后再执行尝试操作它的脚本。

2. 下载库文件

您可以从 D3.js 官方网站下载：https://d3js.org。您通常会找到一个包含库文件的 d3.zip 文件。解压后，您可以找到 d3.min.js（压缩版本，适用于生产环境）或 d3.js（未压缩版本，适用于开发和调试）。

将 d3.min.js 文件放在您的项目目录中（例如，放在 js/ 或 libs/ 文件夹中），并在本地进行链接：

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>D3.js Local File Example</title>
  <!-- Link to a local D3.js file -->
  <script src="path/to/your/d3.min.js"></script>
 </head>
 <body>
  <script>
   // Your D3.js code here
  </script>
 </body>
</html>

3. 使用 npm 或 Yarn（适用于现代 JavaScript 项目）

对于大型项目或在使用构建工具（如 Webpack、Parcel 或 Rollup）时，通常会使用 npm (Node Package Manager) 或 Yarn 将 D3.js 安装为 Node.js 模块。

首先，请确保您已安装 Node.js 和 npm。然后，在您的项目终端中执行：

# Using npm
npm install d3

# Or using Yarn
yarn add d3

安装完成后，您可以使用 ES6 import 语法将 D3.js（或特定的 D3 模块）导入到您的 JavaScript 文件中：

// Import the entire D3 library
import * as d3 from 'd3';

// Or import specific modules (recommended for smaller bundle sizes)
// import { select } from 'd3-selection';
// import { scaleLinear } from 'd3-scale';
// import { axisBottom } from 'd3-axis';

// Example usage:
// const svg = select('body').append('svg');
// console.log(d3.version);

这种方法是现代 Web 开发的标准做法，有助于更好地管理依赖项以及利用 D3 的模块化架构。

选择文本编辑器 / IDE

您可以在任何文本编辑器中编写 D3.js 代码。但是，使用集成开发环境 (IDE) 或对 JavaScript 支持良好的代码编辑器可以提高您的工作效率。常用的选择包括：

Visual Studio Code (VS Code): 免费、非常流行，对 JavaScript 支持和扩展非常出色。
WebStorm: 一个专为 Web 开发而设计的强大商业 IDE。
Sublime Text: 一个多功能且快速的代码编辑器。
Atom: 另一个免费且可扩展的编辑器。

语法高亮、代码自动补全和调试工具等功能会非常有帮助。

Web 浏览器

D3.js 依赖于现代 Web 标准（SVG、CSS3、HTML5），并且在最新的 Web 浏览器中工作得最好。始终在您的目标浏览器中测试您的可视化作品。开发者工具（在大多数浏览器中按 F12 可访问）对于调试来说必不可少。

Web 服务器（开发服务器）

虽然您通常可以直接在浏览器中打开 HTML 文件（file:///...），但某些浏览器安全策略（如跨域资源共享 - CORS）可能会阻止 JavaScript 在这种方式下加载外部数据文件（例如 CSV、JSON）。

为避免这些问题，最好通过本地 Web 服务器来提供项目文件服务。

简单的本地开发服务器选项：

Node.js http-server: 如果您安装了 Node.js，可以全局安装它（npm install -g http-server），然后在项目目录中运行 http-server。
Python 的 http.server: 如果您安装了 Python 3，可以在终端中进入项目目录并运行 python -m http.server。
VS Code 的 Live Server 扩展: 一个流行的扩展，提供实时重载的服务器。

使用本地服务器，您可以通过 http://localhost:PORT 访问您的项目，并且通常提供更真实的开发环境。