データセットの日付/時間のフォーマットがチャートで表示するフォーマットが違うことが多い
- 時系列のデータセットにある日付/時間のフォーマットがデータ抽出ロジックに左右され、いろいろなフォーマットがあります
// 例:時系列のデータセット var data_set = [ {date:"2017-1-1", val:16}, {date:"2017-1-2", val:6}, {date:"2017-1-3", val:1}, {date:"2017-1-4", val:5}, {date:"2017-1-5", val:26}, {date:"2017-1-6", val:36}, {date:"2017-1-7", val:10}, {date:"2017-1-8", val:8}, {date:"2017-1-9", val:21}, {date:"2017-1-10", val:26}, {date:"2017-1-11", val:19}, {date:"2017-1-12", val:20}, ] ;
- 実際にチャートの軸の日付フォーマットがデータセットのものと違うことが多いです
d3-time-formatモジュールが日付フォーマット変換に関する様々な機能を提供しています
- 日付、曜日、時間などのフォーマット定義関数: d3.timeFormat()
var formatTime = d3.timeFormat("%Y-%-m-%e"); formatTime(new Date); // "2017-10-25"
「%」記号で日付、時間のフォーマットを決める
- 日付、曜日、時間などフォーマット変換: d3.timeParse()
var parseTime = d3.timeParse("%Y-%m-%e"); parseTime("2017-10-25"); // Sun Oct 25 2015 00:00:00 GMT+0900 (Japan Standard Time)
- 日付/時間関連のフォーマット一覧
- %a - 曜日の略称
- %A - 曜日の全称
- %b - 月の略称
- %B - 月の全称
- %c - ローカル環境の日付と時間、例:10/25/2017, 9:41:57 PM
- %d - ゼロ付きの日、月の数字 [01,31].
- %e - 空白付きの日、月の数字 [ 1,31]; %_d と同じ.
- %f - マイクロ秒の数字 [000000, 999999].
- %H - 24時間制の時間 [00,23].
- %I - 12時間制の時間 [01,12].
- %j - 一年間にその日の番号 [001,366].
- %m - 月に数字 [01,12].
- %M - 分の数字 [00,59].
- %L - ミニ秒の数字 [000, 999].
- %p - AM or PM.
- %Q - UNIXのマイクロ秒
- %s - UNIXの秒
- %S - 秒の数字 [00,61].
- %u - 月曜日スタート (ISO 8601) の曜日番号 [1,7].
- %w - 日曜日スタートの曜日番号 [0,6].
- %U - 一年に日曜日スタートの曜日番号 [00,53].
- %W - 一年に月曜日スタートの曜日番号 [00,53].
- %V - ISO 8601 基準の一年に曜日の番号 [01, 53].
- %x - ローカル環境の日付 (%-m/%-d/%Y と同じ)
- %X - ローカル環境の時間( %-I:%M:%S %p と同じ)
- %y - 2桁年の数字 [00,99].
- %Y - 4桁年の数字
- %Z - タイムゾーン(例: -0700, -07:00, -07, or Z.)
- %% - %記号のエスケープ
時系列の軸がスケール(d3.scaleTime)に日付フォーマットの使用
- 時系列の軸(d3.axis)に、d3.scaleTime()をよく利用します
var data_set = [ {date:"2017-1-1", val:16}, {date:"2017-1-2", val:6}, {date:"2017-1-3", val:1}, {date:"2017-1-4", val:5}, {date:"2017-1-5", val:26}, {date:"2017-1-6", val:36}, {date:"2017-1-7", val:10}, {date:"2017-1-8", val:8}, {date:"2017-1-9", val:21}, {date:"2017-1-10", val:26}, {date:"2017-1-11", val:19}, {date:"2017-1-12", val:20}, ] ; // データセットの日付フォーマット変換 var timeparser = d3.timeParse("%Y-%m-%e"); data_set = data_set.map( function(d){ // 標準日付に変換して、新しい配列作成 return { date: timeparser(d.date), val:d.val } ; } ); // 時系列のスケール(scaleTime)利用 var x_scale = d3.scaleTime() .domain( [ d3.min(data_set.map( function(d){return d.date;} ) ), d3.max(data_set.map( function(d){return d.date;} ) )] ) .range([0, width]); // 時系列の軸が時系列のスケールを呼び出し d3.axisBottom(x_scale).tickFormat(d3.timeFormat("%m/%e")) // 例:1/1、1/2 のフォーマット
- 上記例では、データセットの日付を標準日付へ、軸の目盛フォーマットへの変換(つまり、標準の日付がなければ、軸の目盛の日付フォーマット変換はできません)