【D3.js in Action 3 精译_034】4.1 D3 中的坐标轴的创建（中一）

当前内容所在位置（可进入专栏查看其他译好的章节内容）

第一部分 D3.js 基础知识
第一章 D3.js 简介（已完结）
1.1 何为 D3.js？
1.2 D3 生态系统——入门须知
1.3 数据可视化最佳实践（上）
1.3 数据可视化最佳实践（下）
1.4 本章小结

第二章 DOM 的操作方法（已完结）
2.1 第一个 D3 可视化图表
2.2 环境准备
2.3 用 D3 选中页面元素
2.4 向选择集添加元素
2.5 用 D3 设置与修改元素属性
2.6 用 D3 设置与修改元素样式
2.7 本章小结

第三章数据的处理（已完结）
3.1 理解数据
3.2 准备数据
3.3 将数据绑定到 DOM 元素
3.3.1 利用数据给 DOM 属性动态赋值

3.4 让数据适应屏幕
3.4.1 比例尺简介（上篇）
3.4.2 线性比例尺（中篇）
3.4.2.1 基于 Mocha 测试 D3 线性比例尺（DIY 实战）

3.4.3 分段比例尺（下篇）
3.4.3.1 使用 Observable 在线绘制 D3 条形图（DIY 实战）

3.5 加注图表标签（上篇）
3.5.1 人物专访：Krisztina Szűcs（下篇）

3.6 本章小结

第四章直线、曲线与弧线的绘制 ✔️
4.1 坐标轴的创建（上篇）
4.1.1 D3 中的边距约定（中一） ✔️
4.1.2 坐标轴的生成 ✔️
4.1.2.1 比例尺的声明（中一） ✔️
4.1.2.2 坐标轴的添加（精译中 ⏳）
4.1.2.3 轴标签的添加

4.2 D3 折线图的绘制

文章目录

- 4.1.1 D3 的边距约定 The margin convention
- 4.1.2 坐标轴的生成 Generating axes
- - 1 比例尺的声明 Declaring the scales

《D3.js in Action》全新第三版封面

《D3.js in Action》全新第三版封面

译者按
继第四章概述部分交代本章任务，并完成绘制图表前的相关数据准备工作后，本篇开始将逐步深入介绍 D3 的边距约定以及坐标轴的基础核心概念，一定要用心学习。D3 的知识结构非常严密，一步跟不上，后面再想补回来就非常吃力了，主打一个步步为营。不要在意内容的多寡，潜心积累，持续深耕就行了。一起学起来吧！

4.1.1 D3 的边距约定 The margin convention

D3 的边距约定，旨在通过系统化的、可重用的方式为图表周围的坐标轴、标签以及图例保留足够的空间。该约定涉及四个方向，即图表的上方、右侧、下方和左侧，如图 4.3 所示。通过声明这些边距值，就可以知道图表核心区域的位置信息和尺寸大小，该核心区域也被称为 内部图表（inner chart）。

图 4.3 用 D3 的边距约定确定出的图表上、下、左、右方向上的外边距大小示意图

【图 4.3 用 D3 的边距约定确定出的图表上、下、左、右方向上的外边距大小示意图】

各边距（margin）的值都在一个边距对象中声明。该对象由上、下、左、右边距组成。下面来给我们的折线图创建边距对象。在函数 drawLineChart() 内，声明一个名为 margin 的常量，并沿顺时针方向令其顶部、右侧、底部、左侧的边距值分别为 40px、170px、25px 和 40px，如以下代码所示：

const drawLineChart = (data) => {
  const margin = {top: 40, right: 170, bottom: 25, left: 40};
};

提前准确预判该为坐标轴和图表标签预留多大空间通常是不现实的。一般得从一个合理的推测开始，然后再根据需要进行调整。例如，查看前面图 4.1 中的折线图或者浏览项目的线上版本（详见 http://mng.bz/5orB），就会发现图表右侧渲染出的标签相对较宽，因此右边距暂定 170px；此外，坐标轴的标签占用空间其实并不大，因此剩余的边距可以调小一点。

一旦确定了边距对象的尺寸，下一步就可以考虑 SVG 容器的尺寸大小了。当 SVG 的容器大小和边距都确定后，就可以算出另两个新常量的大小：innerWidth 和 innerHeight，分别表示内部图表的宽度和高度。各尺寸的空间分布情况如图 4.4 所示：

图 4.4 SVG 容器尺寸和边距确定后，就能算出内部图表的宽高

【图 4.4 SVG 容器尺寸和边距确定后，就能算出内部图表的宽高】

内部图表的宽度值等于 SVG 容器的宽度减左右两侧的边距宽度。若 SVG 容器宽 1000px，左右边距分别为 170px 和 40px，则内部图表可分到 790px；同理，若 SVG 容器总高度为 500px，减去上下边距的高即为内部图表的高度值，可算得 435px。这样，常量 innerWidth 和 innerHeight 就与边距尺寸成线性关系，后续如果边距有变动，这两个值也会同步更新：

const margin = {top: 40, right: 170, bottom: 25, left: 40};
const width = 1000;
const height = 500;
const innerWidth = width - margin.left - margin.right;
const innerHeight = height - margin.top - margin.bottom;

接着再来添加折线图的 SVG 容器。还是在函数 drawLineChart() 内部，将一个 SVG 元素追加到 id 为 line-chart 的 div 元素内；然后使用 width 和 height 常量设置 SVG 的 viewBox 属性。还可以临时给 SVG 元素绘制一个边框，以便看清工作区域的方位（关于如何将元素添加到 DOM 结构、或者元素属性与样式的设置方法，详见第 2 章相关内容）。

const svg = d3.select("#line-chart")
  .append("svg")
  .attr("viewBox", `0, 0, ${width}, ${height}`);

现在，各方向上的边距值和 SVG 的原点坐标都已经确定好了。折线图中的每个元素都必须向新划定的绘图区域平移。这时应该将内部图表封装在一个 SVG 的分组元素中，并只对该分组元素设置平移即可，无需挨个为每个图表元素指定平移量，如图 4.5 所示。这样做也为内部图表建立了一套新的坐标系。

图 4.5 包含内部图表的 SVG 分组元素的平移效果图。该平移也为内部图表各元素建立了新的坐标系

【图 4.5 包含内部图表的 SVG 分组元素的平移效果图。该平移也为内部图表各元素建立了新的坐标系】

要实现上述效果，需要在 SVG 容器中添加一个分组元素；然后利用左边距和上边距指定该分组的平移量；最后将 SVG 分组赋给常量 innerChart，以备后用：

const innerChart = svg
  .append("g")
  .attr("transform", `translate(${margin.left}, ${margin.top})`);

D3 的边距约定以及上述做法的主要优点在于，这些尺寸一旦确立，后续就无需再考虑相关问题了。这样，在充分考虑并提前预留标签、图例及其他补充信息的绘制区域后，就可以继续创建折线图的坐标轴以及核心图表了。

4.1.2 坐标轴的生成 Generating axes

边距一旦确定，就可以给图表添加坐标轴了。坐标轴既是数据可视化的重要组成部分，同时也是观众理解所绘数据与相关类别的重要参考。

对照前面图 4.1 或者线上版（详见：http://mng.bz/5orB）的折线图，可以看到两个坐标轴：横轴（也称 x 轴）显示各月份；纵轴（或 y 轴）则为华氏温度 ¹ 的参考轴线。

译注

为方便查看效果，这里直接给出本专栏第 32 篇（第四章概述）中的最终效果图：

【补图 4.1 本章实现项目：2021 年纽约市温度变化及全年降水天数占比情况可视化】

D3 通过 axis() 的 组件生成器（component generator） 来创建坐标轴。该生成器接受一个比例尺函数作为参数，并返回一个组成该坐标轴的 SVG 元素。第三章介绍的比例尺相关知识还有印象吗，它们负责将定义域中的值转换为值域中对应的值，并通过这些值来绘制图表。而折线图与之类似，比例尺传入后，将算得数据集各日期的水平坐标，以及相关温度值对应的垂直坐标。

1 比例尺的声明 Declaring the scales

根据上面的介绍，创建 D3 坐标轴的第一步，其实是声明它们相应的比例尺。首先要创建一个能设置日期水平位置的比例尺，这正是 D3 时间比例尺 d3.scaleTime() 的长项（更多 D3 比例尺选型方面的介绍，详见本书 附录 B（译注：将择日翻译））。时间比例尺属于第三章介绍过的四类比例尺中的第一类：接受连续型输入，并返回连续型输出。时间比例尺的行为特征与第三章介绍的线性比例尺非常类似，唯一的区别在于这里处理的是与时间相关的数据。

接下来，先声明一个时间比例尺常量 xScale，负责 x 轴上的元素定位。该比例尺的定义域从第一个日期值开始，到最后一个日期结束。以下代码片段还用到了 d3.min() 和 d3.max() 函数，它们是 d3-array 模块中的两个工具方法，专门用于查找对应的极值。

而时间比例尺的值域，则是在内部图表的可用水平空间上均匀分布（如图 4.5 所示）。在内部图表的坐标系中，意味着值域将从 0 延展至之前计算过的内部宽度 innerWidth（比例尺定义域及值域的相关知识点，详见第三章）：

const firstDate = d3.min(data, d => d.date);
const lastDate = d3.max(data, d => d.date);
const xScale = d3.scaleTime()
  .domain([firstDate, lastDate])
  .range([0, innerWidth]);

而温度则沿 y 轴分布，也需要一个连续输入与输出的比例尺。这里自然首选线性比例尺，因为我们希望温度与折线图上的垂直坐标呈线性比例关系。

以下代码片段中，声明了一个表示温度比例尺的常量 yScale，负责 y 轴上的元素定位。假定 y 轴从 0 开始，因此 0 即为定义域的第一个传入值；虽然数据集中的最低温度大约在 26°F 左右（即 -3.3°C 上下），但将 y 轴设为从 0 开始也不错，况且在本例中也可以准确地看出气温的演变情况。这就像生活中的大多数情况，其实并没有一个硬性规定；同理，本例中的图表也不能因为华氏度中的 0 度并非真正的 0 而有对错之分。

而定义域需要的第二个参数，这里选数据集中的最大温度。具体的值通过使用 d3.max() 函数检索数据集的 max_temp_F 字段来确定。

比例尺的值域沿图表高度均匀分布，但由于 SVG 坐标系的垂直坐标是向下为正的，因此值域即从图表的内部高度 innerHeight 开始，也就是图表的左下角位置；终点则为 0，对应其左上角的纵坐标：

const maxTemp = d3.max(data, d => d.max_temp_F);
const yScale = d3.scaleLinear()
  .domain([0, maxTemp])
  .range([innerHeight, 0]);

译注
由于 4.1.2 节篇幅太长，拟再分三个子篇进行介绍（足见 D3 坐标轴这个知识点的信息密度之大）。本章同步源码已上传 CSDN 资源库。章节内容持续更新中，敬请关注本精译专栏，及时获取 D3.js 最前沿的数据可视化主流趋势及最佳实践。

华氏温度，即 Fahrenheit temperature，是由德国物理学家丹尼尔·华氏（Daniel Gabriel Fahrenheit）于 1701 年提出，其刻度是基于他所使用的水银温度计的特点，并将其划分为180个单位，并在标准大气压下测得水的冰点为华氏 32 度（32°F），沸点为华氏 212 度（212°F）。因为历史文化等原因，美国是目前世界上仅有的五个还在使用华氏度的国家之一。华氏度与摄氏度的换算关系为：1°F = 1.8 × °C + 32。 ↩︎