0

次のようなデータセットがあります。

data_set=[{date: '2012,09,04,10,54,53'},
{date: '2012,09,05,10,58,57'},
{date: '2012,09,11,10,44,05'},
{date: '2012,09,04,11,25,30'},
{date: '2012,09,04,10,28,55'},
{date: '2012,09,04,12,30,17'},
{date: '2012,09,04,11,14,23'},
{date: '2012,09,04,12,16,10'},
{date: '2012,09,04,11,57,46'},
{date: '2012,09,04,11,15,53'},
{date: '2012,09,04,11,25,43'},];

x 軸が完全な日付ではなく時刻である散布図を作成しようとしています。x 軸に 24 期間のみを表示するにはどうすればよいですか? また、日付ポイントを x 軸に沿って適切にプロットするにはどうすればよいですか? サウンド d3.time.scale() を使用しようとしていますか、単に d3.linear.scale() を使用してフォーマットの問題を回避する必要がありますか? 私がやりたいのは、曜日ごとにy軸に沿った異なる点にすることです。プロットの例はこちらです。この例では、10=Monday、20=Tuesday などです。異なる記号は、特定の曜日の月の異なる日を表します。

そこで、文字列から日付、特に時間と分を取り出す次の関数を作成しました。

var date_format = d3.time.format("%Y,%m,%d,%H,%M,%S");                                                                                                                               
var time_format = d3.time.format("%X");

これらの関数を使用して、次のステートメントを作成しました。

dd = date_format.parse('2012,01,02,12,39,45')
Mon Jan 02 2012 12:39:45 GMT-0800 (PST)
time_format(dd)
"12:39:45"

コンソールでは、文字列を取得して日付に変換し、その日付を使用して時刻を生成したことがわかります。d3.time.scale() は、ドメインを設定しようとしたときに渡す時間を受け入れないようです。

http://i.imgur.com/DRtSW.png「完成したプロット」

4

3 に答える 3

1

データセットは、キーと値のペアであるオブジェクトを含むJSON配列です。[...]{date: '...'}

このペアの値は、カンマ区切りの文字列です。

配列をループして、(たとえば) 時間と分の値を取り出して、新しいデータセットを構築することができます。

var new_data = [];
for (var idx = 0; idx < data_set.length; idx++) {
    var datum = data_set[idx];
    var date_value = datum.date;
    var date_elements = date_value.split(",");
    var hour = date_elements[3];
    var minutes = date_elements[4];
    var new_date = {};
    new_date.date = hour + "," + minutes;
    new_data.push(new_date);
};

new_data次に、時間と分のデータのみを含む変更されたデータセットを d3 コードに渡すことができます。

編集

役に立つ場合は、上記のコードを編集して、new_dateオブジェクト インスタンスの形式を d3 関数が使用できる形式に変更することをお勧めします。正直なところ、私は API の日付/時刻部分にあまり詳しくないので、変更が必要になる場合があります。データ配列を前処理し、必要なデータで配列を構築するために何ができるかを一般的な方法で示しようとしています。

于 2012-10-08T10:31:37.967 に答える
0

アレックス・レイノルズ: もしかして？

    new_date.date = hour + ":" + minutes;

?

また、ティックを時間と分にフォーマットするフォーマット関数をタイムスケールに提供することもできます。https://github.com/mbostock/d3/wiki/Time-Formatting および https://github.com/mbostock/d3/wiki/SVG-Axes#wiki-tickFormatを参照 してください。

于 2012-10-08T17:58:33.973 に答える
0

D3 (または一般的な JavaScript) は、日付オブジェクトを必要としないと、時刻をうまく処理できないようです。私の解決策は、時刻を 00:00:00 (または精度が必要な場合は秒) からの整数の分数として保存することです。分単位では、0 から 1440 までの int です。

文字列時間 (「00:00:00」など) から変換する必要がある場合は、次のようにすると役立ちます。

time = (parseInt(d.x.split(':')[0]) * 60)  + parseInt(d.x.split(':')[1]);

データが既に int の場合、tickformat でこれを使用できます。

.tickFormat(function(d) { 
  return Math.floor((d)/60) + ":" + ((d)%60);
});

また

.tickFormat(function(d) { 
  return padZero(Math.floor((d)/60)) + ":" + padZero((d)%60));
});

padZero「1:30」または「0:0」ではなく「01:30」および「00:00」になるように先行ゼロを埋め込む独自の関数はどこにありますか

于 2014-06-09T09:08:17.133 に答える