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

如果未指定 網域，則預設為當地時間的 [2000-01-01, 2000-01-02]。如果未指定 範圍，則預設為 [0, 1]。

scaleUtc(網域, 範圍) ​

範例 · 原始碼 · 等同於 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

如果未指定 網域，則預設為 UTC 時間的 [2000-01-01, 2000-01-02]。如果未指定 範圍，則預設為 [0, 1]。

提示

如果可能，建議優先使用 UTC 比例尺，因為它的行為較可預測：天數永遠是二十四小時，而且比例尺不會依賴瀏覽器的時區。

時間.ticks(計數) ​

範例 · 原始碼 · 傳回比例尺網域中的代表性日期。

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

傳回的刻度值是均勻間隔的（大多數），具有明智的值（例如午夜的每一天），並且保證在網域的範圍內。刻度通常用於顯示參考線或刻度記號，並與視覺化資料結合使用。

可以指定一個選用的 計數 來影響產生多少個刻度。如果未指定 計數，則預設為 10。指定的 計數只是一個提示；比例尺可能會根據網域傳回更多或更少的值。

會考慮以下時間間隔用於自動刻度

  • 1、5、15 和 30 秒。
  • 1、5、15 和 30 分鐘。
  • 1、3、6 和 12 小時。
  • 1 和 2 天。
  • 1 週。
  • 1 和 3 個月。
  • 1 年。

代替 計數，可以明確指定一個 時間 間隔。若要修剪給定時間 間隔 所產生的刻度，請使用 間隔.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 - 月份界線，例如 二月。
  • %b %d - 週界線，例如 2月 06。
  • %a %d - 日界線，例如 週一 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，也可以指定一個選用的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]。如果範圍有超過兩個值，調整範圍只會影響第一個和最後一個值。