Skip to content

时间尺度

¥Time scales

时间尺度是 线性比例尺 的一种变体,它具有时间域:域值被强制转换为 dates 而不是数字,并且 invert 同样返回日期。时间尺度基于 日历间隔 实现 ticks,省去了为时间域生成坐标轴的麻烦。

¥Time scales are a variant of linear scales that have a temporal domain: domain values are coerced to dates rather than numbers, and invert likewise returns a date. Time scales implement ticks based on calendar intervals, taking the pain out of generating axes for temporal domains.

scaleTime(domain, range)

示例 · 源代码 · 使用指定的 domainrange 构造一个新的时间比例尺,禁用 defaultinterpolatorclamping。例如,要创建位置编码:

¥Examples · Source · Constructs a new time scale with the specified domain and range, the default interpolator and clamping disabled. For example, to create a position encoding:

js
const x = d3.scaleTime([new Date(2000, 0, 1), new Date(2000, 0, 2)], [0, 960]);
x(new Date(2000, 0, 1, 5)); // 200
x(new Date(2000, 0, 1, 16)); // 640
x.invert(200); // Sat Jan 01 2000 05:00:00 GMT-0800 (PST)
x.invert(640); // Sat Jan 01 2000 16:00:00 GMT-0800 (PST)

如果未指定域,则默认为本地时间 [2000-01-01, 2000-01-02]。如果未指定范围,则默认为 [0, 1]。

¥If domain is not specified, it defaults to [2000-01-01, 2000-01-02] in local time. If range is not specified, it defaults to [0, 1].

scaleUtc(domain, range)

示例 · 源代码 · 等同于 scaleTime,但返回的时间尺度采用 协调世界时 而非本地时间。例如,要创建位置编码:

¥Examples · Source · Equivalent to scaleTime, but the returned time scale operates in Coordinated Universal Time rather than local time. For example, to create a position encoding:

js
const x = d3.scaleUtc([new Date("2000-01-01"), new Date("2000-01-02")], [0, 960]);
x(new Date("2000-01-01T05:00Z")); // 200
x(new Date("2000-01-01T16:00Z")); // 640
x.invert(200); // 2000-01-01T05:00Z
x.invert(640); // 2000-01-01T16:00Z

如果未指定域,则默认为 UTC 时间 [2000-01-01, 2000-01-02]。如果未指定范围,则默认为 [0, 1]。

¥If domain is not specified, it defaults to [2000-01-01, 2000-01-02] in UTC time. If range is not specified, it defaults to [0, 1].

提示

如果可能,应优先使用 UTC 刻度,因为它的行为更可预测:天数始终为二十四小时,且刻度不受浏览器时区影响。

¥A UTC scale should be preferred when possible as it behaves more predictably: days are always twenty-four hours and the scale does not depend on the browser’s time zone.

time.ticks(count) {#time_ticks}

示例 · 源代码 · 从比例尺的域中返回代表日期。

¥Examples · Source · Returns representative dates from the scale’s domain.

js
const x = d3.scaleTime();
x.ticks(10);
// [Sat Jan 01 2000 00:00:00 GMT-0800 (PST),
//  Sat Jan 01 2000 03:00:00 GMT-0800 (PST),
//  Sat Jan 01 2000 06:00:00 GMT-0800 (PST),
//  Sat Jan 01 2000 09:00:00 GMT-0800 (PST),
//  Sat Jan 01 2000 12:00:00 GMT-0800 (PST),
//  Sat Jan 01 2000 15:00:00 GMT-0800 (PST),
//  Sat Jan 01 2000 18:00:00 GMT-0800 (PST),
//  Sat Jan 01 2000 21:00:00 GMT-0800 (PST),
//  Sun Jan 02 2000 00:00:00 GMT-0800 (PST)]

返回的刻度值间距均匀(大多数情况下)具有合理的值(例如每天午夜),并且保证在域的范围内。刻度通常用于与可视化数据结合显示参考线或刻度标记。

¥The returned tick values are uniformly-spaced (mostly), have sensible values (such as every day at midnight), and are guaranteed to be within the extent of the domain. Ticks are often used to display reference lines, or tick marks, in conjunction with the visualized data.

可以指定一个可选的计数,用于影响生成的刻度数。如果未指定 count,则默认为 10。指定的计数只是一个提示;比例尺可能会根据域返回更多或更少的值。

¥An optional count may be specified to affect how many ticks are generated. If count is not specified, it defaults to 10. The specified count is only a hint; the scale may return more or fewer values depending on the domain.

以下时间间隔将用于自动刻度:

¥The following time intervals are considered for automatic ticks:

  • 1、5、15 和 30 秒。

    ¥1-, 5-, 15- and 30-second.

  • 1、5、15 和 30 分钟。

    ¥1-, 5-, 15- and 30-minute.

  • 1、3、6 和 12 小时。

    ¥1-, 3-, 6- and 12-hour.

  • 1 天和 2 天。

    ¥1- and 2-day.

  • 1 周。

    ¥1-week.

  • 1 个月和 3 个月。

    ¥1- and 3-month.

  • 1 年。

    ¥1-year.

可以显式指定 时间间隔 来代替计数。要修剪给定时间间隔内生成的刻度,请使用 interval.every。例如,要以 15 分钟为间隔生成刻度:

¥In lieu of a count, a time interval may be explicitly specified. To prune the generated ticks for a given time interval, use interval.every. For example, to generate ticks at 15-minute intervals:

js
const x = d3.scaleUtc().domain([new Date("2000-01-01T00:00Z"), new Date("2000-01-01T02:00Z")]);
x.ticks(d3.utcMinute.every(15));
// [2000-01-01T00:00Z,
//  2000-01-01T00:15Z,
//  2000-01-01T00:30Z,
//  2000-01-01T00:45Z,
//  2000-01-01T01:00Z,
//  2000-01-01T01:15Z,
//  2000-01-01T01:30Z,
//  2000-01-01T01:45Z,
//  2000-01-01T02:00Z]

注意:在某些情况下,例如以天为单位的刻度,指定步长可能会导致刻度间距不规则,因为时间间隔的长度会有所不同。

¥Note: in some cases, such as with day ticks, specifying a step can result in irregular spacing of ticks because time intervals have varying length.

time.tickFormat(count, specifier) {#time_tickFormat}

示例 · 源代码 · 返回一个适合显示 tick 值的时间格式函数。

¥Examples · Source · Returns a time format function suitable for displaying tick values.

js
const x = d3.scaleUtc().domain([new Date("2000-01-01T00:00Z"), new Date("2000-01-01T02:00Z")]);
const T = x.ticks(); // [2000-01-01T00:00Z, 2000-01-01T00:15Z, 2000-01-01T00:30Z, …]
const f = x.tickFormat();
T.map(f); // ["2000", "12:15", "12:30", "12:45", "01 AM", "01:15", "01:30", "01:45", "02 AM"]

指定的计数目前被忽略,但为了与 linear.tickFormat 等其他比例尺保持一致,可以接受。如果指定了格式说明符,则此方法等同于 format。如果未指定 specifier,则返回默认时间格式。默认多尺度时间格式根据指定的日期选择一种易于理解的表示形式,如下所示:

¥The specified count is currently ignored, but is accepted for consistency with other scales such as linear.tickFormat. If a format specifier is specified, this method is equivalent to format. If specifier is not specified, the default time format is returned. The default multi-scale time format chooses a human-readable representation based on the specified date as follows:

  • %Y - 用于年边界,例如 2011

    ¥%Y - for year boundaries, such as 2011.

  • %B - 用于月份边界,例如 February

    ¥%B - for month boundaries, such as February.

  • %b %d - 用于周边界,例如 Feb 06

    ¥%b %d - for week boundaries, such as Feb 06.

  • %a %d - 对于日期边界,例如 Mon 07

    ¥%a %d - for day boundaries, such as Mon 07.

  • %I %p - 用于小时边界,例如 01 AM

    ¥%I %p - for hour boundaries, such as 01 AM.

  • %I:%M - 用于分钟边界,例如 01:23

    ¥%I:%M - for minute boundaries, such as 01:23.

  • :%S - 用于第二个边界,例如 :45

    ¥:%S - for second boundaries, such as :45.

  • .%L - 其他所有时间,例如 .012,以毫秒为单位。

    ¥.%L - milliseconds for all other times, such as .012.

虽然有些不寻常,但这种默认行为具有提供局部和全局上下文的优势:例如,将一系列刻度值格式化为 [11 PM, Mon 07, 01 AM],可以同时显示有关小时、日期和星期的信息,而不仅仅是 [11 PM, 12 AM, 01 AM] 的小时信息。如果你想自定义条件时间格式,请参阅 d3-time-format

¥Although somewhat unusual, this default behavior has the benefit of providing both local and global context: for example, formatting a sequence of ticks as [11 PM, Mon 07, 01 AM] reveals information about hours, dates, and day simultaneously, rather than just the hours [11 PM, 12 AM, 01 AM]. See d3-time-format if you’d like to roll your own conditional time format.

time.nice(count) {#time_nice}

示例 · 源代码 · 扩展域,使其以整数值开始和结束。

¥Examples · Source · Extends the domain so that it starts and ends on nice round values.

js
const x = d3.scaleUtc().domain([new Date("2000-01-01T12:34Z"), new Date("2000-01-01T12:59Z")]).nice();
x.domain(); // [2000-01-01T12:30Z, 2000-01-01T13:00Z]

此方法通常会修改比例尺的取值范围,并且可能只会将边界扩展到最接近的整数值。更多信息请参阅 linear.nice

¥This method typically modifies the scale’s domain, and may only extend the bounds to the nearest round value. See linear.nice for more.

可选的刻度计数参数允许更好地控制用于扩展边界的步长,从而保证返回的 ticks 精确覆盖域。或者,可以指定 时间间隔 来明确设置刻度。如果指定了间隔,还可以指定可选步骤以跳过某些刻度。例如,time.nice(d3.utcSecond.every(10)) 将范围扩展为偶数十秒(0、10、20,等等)。有关更多详细信息,请参阅 time.ticksinterval.every

¥An optional tick count argument allows greater control over the step size used to extend the bounds, guaranteeing that the returned ticks will exactly cover the domain. Alternatively, a time interval may be specified to explicitly set the ticks. If an interval is specified, an optional step may also be specified to skip some ticks. For example, time.nice(d3.utcSecond.every(10)) will extend the domain to an even ten seconds (0, 10, 20, etc.). See time.ticks and interval.every for further detail.

如果域是根据数据计算出来的(比如使用 extent),并且可能不规则,那么 Nicing 就很有用。例如,对于 [2009-07-13T00:02, 2009-07-13T23:48] 的域,合适的域是 [2009-07-13, 2009-07-14]。如果域包含两个以上的值,则对域进行细化处理仅影响第一个和最后一个值。

¥Nicing is useful if the domain is computed from data, say using extent, and may be irregular. For example, for a domain of [2009-07-13T00:02, 2009-07-13T23:48], the nice domain is [2009-07-13, 2009-07-14]. If the domain has more than two values, nicing the domain only affects the first and last value.