コンテンツにスキップ

d3-time-format

このモジュールは、C標準ライブラリの由緒ある strptime および strftime 関数の近似的なJavaScript実装を提供し、さまざまなロケール固有の表現で日付を解析またはフォーマットするために使用できます。日付をフォーマットするには、指定子(目的のフォーマット*ディレクティブ*を含む文字列。`%`で示されます)からフォーマッタを作成します。次に、日付をフォーマッタに渡すと、文字列が返されます。たとえば、現在の日付を人間が読める文字列に変換するには、次のようにします。

js
const formatTime = d3.utcFormat("%B %d, %Y");
formatTime(new Date()); // "May 31, 2023"

同様に、文字列を日付に戻すには、パーサーを作成します。

js
const parseTime = d3.utcParse("%B %d, %Y");
parseTime("June 30, 2015"); // 2023-05-31

より複雑な条件付き時間形式を実装することもできます。たとえば、時間間隔を使用したマルチスケール時間形式を次に示します。

js
const formatMillisecond = d3.utcFormat(".%L"),
    formatSecond = d3.utcFormat(":%S"),
    formatMinute = d3.utcFormat("%I:%M"),
    formatHour = d3.utcFormat("%I %p"),
    formatDay = d3.utcFormat("%a %d"),
    formatWeek = d3.utcFormat("%b %d"),
    formatMonth = d3.utcFormat("%B"),
    formatYear = d3.utcFormat("%Y");

function multiFormat(date) {
  return (d3.utcSecond(date) < date ? formatMillisecond
      : d3.utcMinute(date) < date ? formatSecond
      : d3.utcHour(date) < date ? formatMinute
      : d3.utcDay(date) < date ? formatHour
      : d3.utcMonth(date) < date ? (d3.utcWeek(date) < date ? formatDay : formatWeek)
      : d3.utcYear(date) < date ? formatMonth
      : formatYear)(date);
}

このモジュールは、人間が読める目盛りを生成するためにD3の時間スケールで使用されます。

*date*.toLocaleString も参照してください。

timeFormat(specifier)

js
d3.timeFormat("%b %d")

デフォルトロケール *locale*.format のエイリアス。

timeParse(specifier)

js
d3.timeParse("%b %d")

デフォルトロケール *locale*.parse のエイリアス。

utcFormat(specifier)

js
d3.utcFormat("%b %d")

デフォルトロケール *locale*.utcFormat のエイリアス。

utcParse(specifier)

js
d3.utcParse("%b %d")

デフォルトロケール *locale*.utcParse のエイリアス。

isoFormat

js
d3.isoFormat(new Date()) // "2023-05-31T18:17:36.788Z"

ソース · 完全なISO 8601 UTC時間フォーマッタ。使用可能な場合、このメソッドはフォーマットに Date.toISOString を使用します。

isoParse

js
d3.isoParse("2023-05-31T18:17:36.788Z")

ソース · 完全なISO 8601 UTC時間パーサー。使用可能な場合、このメソッドは文字列の解析にDateコンストラクタを使用します。ISO 8601に従って入力形式の厳密な検証に依存する場合は、UTCパーサー関数を作成する必要があります。

js
const strictIsoParse = d3.utcParse("%Y-%m-%dT%H:%M:%S.%LZ");

locale.format(specifier)

js
d3.timeFormat("%b %d")

ソース · 指定された文字列*specifier*の新しいフォーマッタを返します。指定子文字列には、次のディレクティブを含めることができます。

  • `%a`-曜日の省略名。*
  • `%A`-曜日の正式名称。*
  • `%b`-月の省略名。*
  • `%B`-月の正式名称。*
  • `%c`-ロケールの 날짜 및 시간(예: `%x、%X`)。*
  • `%d`-10進数[01,31]としての月の0埋めされた日付。
  • `%e`-10進数[1,31]としての月のスペース埋めされた日付。`%_d`と同じです。
  • `%f`-10進数[000000,999999]としてのマイクロ秒。
  • `%g`-世紀のないISO 8601週ベースの年を10進数[00,99]として表します。
  • `%G`-世紀を含むISO 8601週ベースの年を10進数として表します。
  • `%H`-10進数[00,23]としての時刻(24時間制)。
  • `%I`-10進数[01,12]としての時刻(12時間制)。
  • `%j`-10進数[001,366]としての日付。
  • `%m`-10進数[01,12]としての月。
  • `%M`-10進数[00,59]としての分。
  • `%L`-10進数[000,999]としてのミリ秒。
  • `%p`-AMまたはPM。*
  • `%q`-10進数[1,4]としての四半期。
  • `%Q`-UNIXエポックからのミリ秒。
  • `%s`-UNIXエポックからの秒数。
  • `%S`-10進数[00,61]としての秒。
  • `%u`-月曜日ベース(ISO 8601)の曜日を10進数[1,7]として表します。
  • `%U`-日曜日ベースの週を10進数[00,53]として表します。
  • `%V`-ISO 8601の週を10進数[01,53]として表します。
  • `%w`-日曜日ベースの曜日を10進数[0,6]として表します。
  • `%W`-月曜日ベースの週を10進数[00,53]として表します。
  • `%x`-ロケールの 날짜(예: `%-m /%-d /%Y`)。*
  • `%X`-ロケールの 시간(예: `%-I:%M:%S%p`)。*
  • `%y`-世紀のない年を10進数[00,99]として表します。
  • `%Y`-世紀を含む年を10進数(예: `1999`)として表します。
  • `%Z`-タイムゾーンオフセット(예: `-0700`、 `-07:00`、 `-07`、または `Z`)。
  • `%%`-リテラルパーセント記号(`%`)。

アスタリスク(*)が付いたディレクティブは、ロケール定義の影響を受ける可能性があります。

`%U`の場合、最初の日曜日より前の新年中のすべての日付は、週0と見なされます。`%W`の場合、最初の月曜日より前の新年中のすべての日付は、週0と見なされます。週番号は *interval*.count を使用して計算されます。たとえば、2015-52と2016-00は2015年12月28日月曜日を表し、2015-53と2016-01は2016年1月4日月曜日を表します。これは、より複雑な定義を使用するISO週日付仕様(`%V`)とは異なります。

`%V`、 `%g`、および `%G`の場合、strftimeマニュアルページに従って

このシステムでは、週は月曜日から始まり、最初の週は01から、最後の週は52または53まで番号が付けられます。週1は、新年中に4日以上が含まれる最初の週です(または、同義語として、週01は、木曜日を含む年の最初の週です。または、1月4日を含む週です)。ISO週番号が前年または翌年に属する場合は、代わりにその年が使用されます。

ディレクティブを示す`%`記号の直後には、パディング修飾子を続けることができます。

  • `0`-ゼロパディング
  • `_`-スペースパディング
  • `-`-パディングなし

パディング修飾子が指定されていない場合、デフォルトは%eを除くすべてのアレクティブで0です。%eのデフォルトは_です。(strftimeおよびstrptimeの一部の独自実装では、アレクティブにオプションのフィールド幅または精度を含めることができます。この機能はまだ実装されていません。)

返される関数は、指定された日付をフォーマットし、対応する文字列を返します。

js
const formatMonth = d3.timeFormat("%B"),
    formatDay = d3.timeFormat("%A"),
    date = new Date(2014, 4, 1); // Thu May 01 2014 00:00:00 GMT-0700 (PDT)

formatMonth(date); // "May"
formatDay(date); // "Thursday"

locale.parse(specifier)

js
d3.timeParse("%b %d")

ソース · 指定された文字列specifierの新しいパーサーを返します。指定子文字列には、locale.formatと同じアレクティブを含めることができます。 %dおよび%eアレクティブは、解析では同等と見なされます。

返される関数は、指定された文字列を解析し、対応する日付を返します。文字列がこのフォーマットの指定子に従って解析できない場合はnullを返します。解析は厳密です。指定された文字列が関連付けられた指定子と完全に一致しない場合、このメソッドはnullを返します。たとえば、関連付けられた指定子が%Y-%m-%dT%H:%M:%SZの場合、文字列"2011-07-01T19:15:28Z"は期待どおりに解析されますが、"2011-07-01T19:15:28""2011-07-01 19:15:28"、および"2011-07-01"はnullを返します。(ここでリテラルZは、タイムゾーンオフセットアレクティブ%Zとは異なることに注意してください。)より柔軟なパーサーが必要な場合は、null以外の値が返されるまで、複数のフォーマットを順番に試してください。

locale.utcFormat(specifier)

js
d3.utcFormat("%b %d")

ソース · locale.formatと同じですが、すべてのアレクティブは現地時間ではなく協定世界時(UTC)として解釈されます。

locale.utcParse(specifier)

js
d3.utcParse("%b %d")

ソース · locale.parseと同じですが、すべてのアレクティブは現地時間ではなく協定世界時(UTC)として解釈されます。

timeFormatLocale(definition)

js
const enUs = d3.timeFormatLocale({
  dateTime: "%x, %X",
  date: "%-m/%-d/%Y",
  time: "%-I:%M:%S %p",
  periods: ["AM", "PM"],
  days: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"],
  shortDays: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
  months: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"],
  shortMonths: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]
});

ソース · locale.formatlocale.parselocale.utcFormatlocale.utcParseメソッドを持つ、指定されたdefinitionlocaleオブジェクトを返します。 definitionには、以下のプロパティが含まれている必要があります。

  • dateTime - 日付と時刻(%c)のフォーマット指定子(例:"%a %b %e %X %Y")。
  • date - 日付(%x)のフォーマット指定子(例:"%m/%d/%Y")。
  • time - 時刻(%X)のフォーマット指定子(例:"%H:%M:%S")。
  • periods - 午前と午後の相当語(例:["AM", "PM"])。
  • days - 日曜日から始まる曜日のフルネーム。
  • shortDays - 日曜日から始まる曜日の省略名。
  • months - 1月から始まる月のフルネーム。
  • shortMonths - 1月から始まる月の省略名。

timeFormatDefaultLocale(definition)

js
const enUs = d3.timeFormatDefaultLocale({
  dateTime: "%x, %X",
  date: "%-m/%-d/%Y",
  time: "%-I:%M:%S %p",
  periods: ["AM", "PM"],
  days: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"],
  shortDays: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
  months: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"],
  shortMonths: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]
});

ソース · d3.timeFormatLocaleと同じですが、d3.timeFormatd3.timeParsed3.utcFormatd3.utcParseも新しいロケールのlocale.formatlocale.parselocale.utcFormatlocale.utcParseに再定義します。デフォルトのロケールを設定しない場合、デフォルトは米国英語になります。