【D3.js in Action 3 精译】1.2.3 Canvas 与 WebGL + 1.2.4 CSS

当前内容所在位置

第一部分 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 记事本（待翻译）

译注
经过了 SVG 基础知识部分的“重磅洗礼”后，剩下的 D3 基础知识点就没有那么密集了，但是也不能掉以轻心，这些都是学好整本书后续内容的基础。基础不牢，地动山摇。一起来过一遍这些知识点吧。另外，CSS 较薄弱的朋友，也可以看看我的另一个技术专栏《CSS in Depth 2》。这本书也是 CSS 进阶的神作，翻译的都是全新第二版（预计本月在 Manning 出版发行）中的内容。敬请关注，有问题随时给我留言即可。

1.2.3 Canvas 与 WebGL

虽然 D3 项目常用 SVG 元素来构建，但偶尔也会遇到对大型数据集创建复杂可视化的情况，这时再用 SVG 来实现可能会出现性能问题。关键是记住一点：D3 会对数据可视化中的每一个图形向 DOM 中添加一个或多个 SVG 元素。其中一个典型案例，是实现一个由数千个节点（nodes）和链接（links）组成的大型网络可视化效果——估计会让浏览器不堪重负……虽然浏览器不断升级的性能可以轻松处理越来越多的对象型数量，但一则普遍接受的实践经验是：如果可视化包含的元素超过 1000 个，就应该考虑改用 Canvas 而不是 SVG。

Canvas 画布是一类客户端绘图 API，利用脚本（通常为 JavaScript）来创建视觉效果和动画。Canvas 不会将 XML 元素添加到 DOM 中，这就大大提高了构建大型数据集下的可视化效果的性能。但 Canvas 无法提供能媲美 SVG 的高清渲染效果，并且会使交互逻辑的处理复杂化，因此综合考虑，本书主要还是沿用 SVG 来进行构建。

Canvas 还可以通过 WebGL 的 API 创建出 3D 对象。虽然 WebGL 的学习不在本书讨论范围内，但在 Web 中创建 3D 数据可视化是完全可行的。目前，它主要用于实验性质的项目。本书第 15 章还会介绍如何使用 Canvas 构建可视化，并讨论其优缺点。

1.2.4 CSS

CSS 是层叠样式表（Cascading Style Sheets）的缩写形式。它是一种描述 DOM 元素在屏幕上的显示方式与外观效果的语言。从页面整体的 Grid 网格布局、到文本使用的字体系列（family of fonts）、再到散点图中数据点的颜色，CSS 可以将一个普通的 HTML 文件打造成令人惊叹的网页。在 D3 项目中，通常使用行内样式或引入外部样式表来应用 CSS 样式。

如以下示例代码所示，行内样式表（inline-styles）通过 style 属性（attribute）应用到所在元素。 style 属性既可用于传统 HTML 元素，也可用于 SVG 元素，D3 为这些属性值的读写访问提供了一种便捷的方法，本书后续第 2 章会重点讨论。

<div style="css language-css">padding:10px; background:#00ced1;"> ... </div>
<text style="css language-css">font-size:16px; font-family:serif;"> ... </text>

行内样式只对所在元素生效。若要在多个元素上生效，分别在其 style 属性应用相同的样式（或者应用到包含对应元素的 SVG 分组元素上）倒也不是不行，但这并不是最有效的方法。

另一方面，外部 CSS 样式表则非常适合让样式在全局范围内生效。其中一种方案是要求 D3 为多个元素添加相同的类名（class names），然后在外部样式表使用该类名作选择器（selector），并在目标元素中应用相同的样式属性（styling properties），如以下示例所示。这种方法效率更高，尤其是在维护大型项目时。它还遵循了“关注点分离”原则（the separation of concerns principle）：将使用 JavaScript 控制的行为，与使用 CSS 规范的样式分离开来。注意，像 SASS 和 LESS 这样的 CSS 预处理工具也属于引入外部样式表方案的一部分。

CSS 样式表中的样式代码如下：

css">.my-class {
  font-size: 16px;
  font-family: serif;
}

而在 DOM 中对应的 HTML 如下：

<text class="my-class"> ... </text>

切记：行内样式会优先于从外部样式表引入的样式。因此在任何前端开发项目中，牢记 CSS 的层叠顺序 始终是样式架构规划过程中的重中之重。

（由于下一个小节讲 JavaScript 的基础知识，内容较多，决定在下一篇译文中呈现，敬请留意）