D3.js 核心概念——数据处理与分析（十）时间边距计算器之一

Offer 驾到，掘友接招！我正在参与2022春招打卡活动，点击查看活动详情。

系列文章可以查看《数据可视化》专栏

参考：

• d3-time（非官方中译版）
• Understanding d3-time

D3 提供了 d3-time 和 d3-time-format 两个模块用于处理时间相关的数据。这些模块都是基于 JavaScript 原生的日期系统的，所以模块中的方法只能读取和构建地方时 local time zone 和世界协调时间 UTC。建议在使用这两个模块前，对 Date 对象和它的方法了解熟悉。

? 在 JavaScript 中时间有两种「形式」：

• 协调世界时/世界协调时间 Universal Time Coordinated 简称为 UTC，是最主要的世界时间标准，其以原子时秒长为基础，在时刻上尽量接近于格林威治标准时间（Greenwich Mean Time，简称为 GMT，它是 UTC+0 地方时）。如果以字符串表示协调世界时，会在其中加一个后缀 Z 标识
• 地方时 Locale Time，是由 UTC 加上该地所属时区的偏移量构成的，例如北京时间（地方时）就是比世界协调时快 8 小时（即 UTC+8）

const event = new Date();

// 地方时
// 本文的地方时采用北京时间，即 UTC+8
console.log(event.toString());
// Fri Feb 04 2022 15:38:53 GMT+0800 (中国标准时间)

// 协调世界时
console.log(event.toISOString());
// T 字符表示日期和时间的分隔
// z 表示协调世界时间，即 UTC+0
// 2022-02-04T07:38:53.993Z
复制代码

在 d3-time 模块中有丰富的方法，其中最重要的是可以用于生成特定间距的时间，例如按日、周、月、年来生成时间（这些时间一般在间距的「边缘」，例如每天的凌晨零点、每个月的第一天的凌晨零点、每年的第一天的凌晨零点等），这在生成时间轴很有帮助。

⚠️ 时距器生成的时间点请留意采用的是哪一种时间类型，如果是采用的是地方时，例如北京时间，则当天的凌晨零点转换为 UTC 则是前一天的 16:00

时间有不同的尺度，如年、月、日、时、分、秒、毫秒（毫秒是 d3-time 模块支持的最小的时间精度），因此有相应的不同时间边距计算器（用于生成特定间距的时间，简称为时距器，以下称为 interval），而且针对不同的时间格式（UTC 或 Local Time Zone）提供两种不同的时距器：

• d3.timeMillisecond 与 d3.utcMillisecond 创建一个间距为毫秒的 interval

• d3.timeSecond 与 d3.utcSecond 创建一个以秒为间距的 interval

• d3.timeMinute 与 d3.utcMinute 创建一个以分钟为间距的 interval（一分钟就是 60 秒，忽略闰秒的存在）

• d3.timeHour 与 d3.utcHour 创建一个以小时为间距的 interval（对于地方时，可能采用了夏令时，使得一天的小时范围校正为 23 或 25）

• d3.timeDay 与 d3.utcDay 创建一个以天为间距的 interval（对于地方时，可能采用了夏令时，使得一天校正为有 23 小时或有 25 小时）

• d3.timeWeek 与 d3.utcWeek 创建一个以周为间距的 interval（一周一般有 168 小时，但是对于地方时，可能采用了夏令时，使得一周校正为有 167 小时或有 169 小时）。一周的起始点为星期日，所以该方法和 d3.timeSunday 与 de.utcSunday 相同。

  对于按周计算间距的情况，D3 还提供了 7 个 interval，以不同起点来计算新的一周：

  • d3.timeSunday 与 d3.utcSunday 创建一个以周为间距的 interval，以星期日作为新一周的起点
  • d3.timeMonday 与 d3.utcMonday 创建一个以周为间距的 interval，以星期一作为新一周的起点
  • d3.timeTuesday 与 d3.utcTuesday 创建一个以周为间距的 interval，以星期二作为新一周的起点
  • d3.timeWednesday 与 d3.utcWednesday 创建一个以周为间距的 interval，以星期三作为新一周的起点
  • d3.timeThursday 与 d3.utcThursday 创建一个以周为间距的 interval，以星期四作为新一周的起点
  • d3.timeFriday 与 d3.utcFriday 创建一个以周为间距的 interval，以星期五作为新一周的起点
  • d3.timeSaturday 与 d3.utcSaturday 创建一个以周为间距的 interval，以星期六作为新一周的起点

• d3.timeMonth 与 d3.utcMonth 创建一个以月为间距的 interval（一个月的天数范围从 28 到 31）

• d3.timeYear 与 d3.utcYear 创建一个以年为间距的 interval（一年的天数范围从 365 到 366）