当前内容所在位置
- 第一部分 D3.js 基础知识
- 第一章 D3.js 简介
- 1.1 何为 D3.js？
- 1.2 D3 生态系统——入门须知
- 1.2.1 HTML 与 DOM
- 1.2.2 SVG - 可缩放矢量图形
- 1.2.3 Canvas 与 WebGL
- 1.2.4 CSS
- 1.2.5 JavaScript
- 1.2.6 Node 与 JavaScript 框架 ✔️
- 1.2.7 Observable 记事本 ✔️
- 1.3 数据可视化最佳实践（精译中 ⏳）
1.2.6 Node 与 JavaScript 框架
JavaScript 在过去十年中经历了重大变化。现代 JavaScript 最重要的两个趋势是 Node.js 的兴起以及 JavaScript 框架成为大多数项目构建的标准。
对于 D3 项目，需要重点关注的 Node 技术是 Node Package Manager（即 NPM，Node.js 的包管理工具）。NPM 可以安装“模块”（modules）或 JavaScript 的第三方小型库以供项目使用，而不必在 <script> 标签中引用大量独立的 JS 文件；即便模块不是作为一个整体结构来构建的，使用模块也可以减少应用的代码量。
2021 年年中发布的 D3.js 第 7 版提供了模块导入功能。本书将以两种方式演示 D3 示例：其一是像第 2 章那样加载整个 D3 库；其二是像后续示例那样，仅包含项目所需的部分 D3 模块。我们可以通过 script 标签来使用 D3，但从第 2 小节开始，本书将使用 NPM 来导入 D3 模块——这是当前的标准做法。若要开发专业的 D3 项目，就必须熟悉这种方式。
如果参与过专业的 Web 项目开发，那么您很有可能正与某款 JavaScript 框架打交道，如 React、Angular、Vue 或 Svelte。这些框架为开发人员构建模块化、可重用及可测试的 Web 项目提供了坚实基础。它们负责构建与更新 DOM——这也是 D3 的核心工作。后续第 8 章还会介绍在 JavaScript 框架内构建 D3 可视化项目时如何避免冲突的相关策略。
最后，在专业工作环境中，您可能会将 D3 与 TypeScript 结合使用。TypeScript 是 JavaScript 的语法超集，可以增强项目的可扩展性以及代码的可维护性。虽然本书不会详细讨论 TypeScript，但 D3 方法的类型可以通过 NPM 包 @types/d3（详见 www.npmjs.com/package/@types/d3）来安装。本书第 8 章还将在 Angular 项目中使用这些类型。
1.2.7 Observable 记事本
如果在网上搜索 D3 项目的示例，必然会看到 Observable 记事本（https://observablehq.com）相关的资源。Observable 是一款针对数据科学和可视化的协同训练营产品，类似于 Python 的 Jupyter Notebook。Observable 平台由 Mike Bostock 创建，取代了之前的 D3 线上沙箱项目 blocks。目前 D3 所有的官方示例都在 Observable 上运行，上面的 D3 社区也相当活跃。
值得注意的是，Observable 要求开发者掌握一种该平台特有的方式来处理 D3 项目；并且上面的内容也不能直接复制粘贴到其他前端开发环境中（尽管 Observable 的 2.0 版本简化了相关流程）。鉴于本书的重点在于构建能部署到前端生产环境中的 D3 可视化项目，因此与 Observable 相关的知识将不作介绍。如果您对 Observable 感兴趣，可参考其官方公布的系列教程。本书介绍的绝大部分技术和概念都可以转化为 Observable 记事本的相应内容。
译注
至此，D3 入门需要掌握的核心基础知识就全部介绍完了。对照文章开头的章节目录不难看出，全新第三版以实战为重点，介绍了大量与 D3 可视化项目相关的内容，尤其是 SVG 绘图基础和原生 JavaScript 语法方面的知识。正如书中所述，实际开发环境中 D3 与 TypeScript 也联系紧密，这一点需要各位 D3 爱好者高度重视。另外，由于大量优秀的 D3 项目示例都是在 Observable 平台进行演示的，后续会根据情况将书中部分案例迁移到 Observable，以飨广大 D3 爱好者。敬请期待！