コンテンツにスキップ

時間スケール

時間スケールは、時間領域を持つ線形スケールの一種です。ドメイン値は数値ではなく日付に強制変換され、invertも同様に日付を返します。時間スケールは、カレンダー間隔に基づいて目盛りを実装し、時間領域の軸生成の手間を省きます。

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スケールは、可能な限り使用することをお勧めします。動作がより予測しやすいからです。日は常に24時間で、スケールはブラウザのタイムゾーンに依存しません。

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.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などの他のスケールとの一貫性のために受け入れられています。書式指定子が指定されている場合、このメソッドはformatと同等です。specifierが指定されていない場合、デフォルトの時間形式が返されます。デフォルトのマルチスケール時間形式は、指定された日付に基づいて、次のように人間が判読できる表現を選択します。

  • %Y - 年境界の場合、例:2011
  • %B - 月境界の場合、例:2月
  • %b %d - 週境界の場合、例:2月06日
  • %a %d - 日境界の場合、例:月07日
  • %I %p - 時間境界の場合、例:午前01時
  • %I:%M - 分境界の場合、例:01:23
  • :%S - 秒境界の場合、例::45
  • .%L - その他すべての時間の場合のミリ秒、例:.012

多少珍しいですが、このデフォルトの動作には、ローカルとグローバルの両方のコンテキストを提供するという利点があります。たとえば、一連の目盛りを[午後11時、月07日、午前01時]としてフォーマットすると、時間[午後11時、午前12時、午前01時]だけでなく、時間、日付、曜日に関する情報が同時に表示されます。独自の条件付き時間形式を作成する場合は、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))は、ドメインを10秒単位(0、10、20、など)に拡張します。詳細については、time.ticksinterval.everyを参照してください。

ドメインがextentを使用してデータから計算され、不規則である可能性がある場合、ナイス化は役立ちます。たとえば、[2009-07-13T00:02, 2009-07-13T23:48]のドメインの場合、ナイスドメインは[2009-07-13, 2009-07-14]です。ドメインに3つ以上の値がある場合、ドメインのナイス化は最初と最後の値にのみ影響します。