由Observable

外观

时间刻度 ​

时间刻度是 线性刻度 的变体，它们具有时间域：域值被强制转换为 日期 而不是数字，反转同样返回一个日期。时间刻度根据 日历间隔 实现 刻度，消除了为时间域生成轴的麻烦。

scaleTime(domain, range) ​

示例 · 源代码 · 使用指定的 域 和 范围、默认 插值器 以及禁用 钳制，构造一个新的时间刻度。例如，要创建一个位置编码

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)

如果未指定 domain，则它默认为本地时间中的 [2000-01-01, 2000-01-02]。如果未指定 range，则它默认为 [0, 1]。

scaleUtc(domain, range) ​

示例 · 源代码 · 等同于 scaleTime，但返回的时间刻度在 协调世界时 而不是本地时间中运行。例如，要创建一个位置编码

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

如果未指定 domain，则它默认为 UTC 时间中的 [2000-01-01, 2000-01-02]。如果未指定 range，则它默认为 [0, 1]。

提示

应尽可能首选 UTC 刻度，因为它行为更可预测：日期始终为二十四小时，并且刻度不依赖于浏览器的时区。

time.ticks(count) ​

示例 · 源代码 · 从刻度的域中返回代表性的日期。

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)]

返回的刻度值是均匀间隔的（大部分情况），具有合理的数值（例如每天午夜），并且保证在域的范围内。刻度通常与可视化数据一起使用，用于显示参考线或刻度标记。

可以指定一个可选的 count 来影响生成的刻度数量。如果未指定 count，则它默认为 10。指定的 count 只是一个提示；刻度可能会根据域返回更多或更少的数值。

以下时间间隔被考虑用于自动刻度

  • 1 秒、5 秒、15 秒和 30 秒。
  • 1 分钟、5 分钟、15 分钟和 30 分钟。
  • 1 小时、3 小时、6 小时和 12 小时。
  • 1 天和 2 天。
  • 1 周。
  • 1 个月和 3 个月。
  • 1 年。

代替 count，可以明确指定一个 时间 interval。要修剪为给定时间 interval 生成的刻度，请使用 interval.every。例如，要以 15 分钟的间隔生成刻度

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]

注意：在某些情况下，例如使用日期刻度，指定一个 step 会导致刻度的不规则间隔，因为时间间隔的长度不同。

time.tickFormat(count, specifier) ​

示例 · 源代码 · 返回一个时间格式函数，适合于显示 刻度 值。

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"]

指定的 count 目前被忽略，但为了与其他刻度（例如 linear.tickFormat）一致，它被接受。如果指定了格式 specifier，则此方法等同于 format。如果未指定 specifier，则返回默认时间格式。默认的多尺度时间格式根据指定的日期选择人类可读的表示形式，如下所示

  • %Y - 用于年边界，例如 2011。
  • %B - 用于月边界，例如 February。
  • %b %d - 用于周边界，例如 Feb 06。
  • %a %d - 用于日边界，例如 Mon 07。
  • %I %p - 用于小时边界，例如 01 AM。
  • %I:%M - 用于分钟边界，例如 01:23。
  • :%S - 用于秒边界，例如 :45。
  • .%L - 毫秒用于所有其他时间，例如 .012。

虽然有些不寻常，但这种默认行为具有提供本地和全局上下文的好处：例如，将一系列刻度格式化为 [11 PM, Mon 07, 01 AM] 会同时显示有关小时、日期和星期几的信息，而不是仅仅显示小时 [11 PM, 12 AM, 01 AM]。如果您想创建自己的条件时间格式，请参阅 d3-time-format。

time.nice(count) ​

示例 · 源代码 · 扩展域，使其开始和结束于漂亮的圆形数值。

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 以了解更多信息。

可选的刻度 count 参数允许更大地控制用于扩展边界的步长，保证返回的 刻度 将完全覆盖域。或者，可以指定一个 时间 interval 来明确设置刻度。如果指定了 interval，还可以指定一个可选的 step 来跳过某些刻度。例如，time.nice(d3.utcSecond.every(10)) 将扩展域到偶数的十秒（0、10、20、等）。请参阅 time.ticks 和 interval.every 以了解更多详细信息。

如果域是从数据中计算出来的，例如使用 extent，并且可能是不规则的，则美化非常有用。例如，对于 [2009-07-13T00:02, 2009-07-13T23:48] 的域，美化的域为 [2009-07-13, 2009-07-14]。如果域具有两个以上的数值，则美化域只会影响第一个和最后一个数值。