2

d3.js の操作 面グラフを表現したいと考えています。次のようなオブジェクトの JSON 配列からデータを取得します。

[{"time":"00:00 - 00:15","energy":10},
 {"time":"00:15 - 00:30","energy":20},
 {"time":"00:30 - 00:45","energy":30},
 {"time":"00:45 - 01:00","energy":50},
 {"time":"01:00 - 01:15","energy":60},
 {"time":"01:15 - 01:30","energy":70}...]

ドメインを x 軸 (時間) で表すために、次のようにドメインの 96 要素すべてをハードコーディングしました。

x.domain(["00:00 - 00:15","00:15 - 00:30","00:30 - 00:45","00:45 - 01:00",
        "01:00 - 01:15","01:15 - 01:30","01:30 - 01:45","01:45 - 02:00",
        "02:00 - 02:15","02:15 - 02:30","02:30 - 02:45","02:45 - 03:00",
        "03:00 - 03:15","03:15 - 03:30","03:30 - 03:45","03:45 - 04:00",
        "04:00 - 04:15","04:15 - 04:30","04:30 - 04:45","04:45 - 05:00",
        "05:00 - 05:15","05:15 - 05:30","05:30 - 05:45","05:45 - 06:00",
        "06:00 - 06:15","06:15 - 06:30","06:30 - 06:45","06:45 - 07:00",
        "07:00 - 07:15","07:15 - 07:30","07:30 - 07:45","07:45 - 08:00",
        "08:00 - 08:15","08:15 - 08:30","08:30 - 08:45","08:45 - 09:00",
        "09:00 - 09:15","09:15 - 09:30","09:30 - 09:45","09:45 - 10:00",
        "10:00 - 10:15","10:15 - 10:30","10:30 - 10:45","10:45 - 11:00",
        "11:00 - 11:15","11:15 - 11:30","11:30 - 11:45","11:45 - 12:00",
        "12:00 - 12:15","12:15 - 12:30","12:30 - 12:45","12:45 - 13:00",
        "13:00 - 13:15","13:15 - 13:30","13:30 - 13:45","13:45 - 14:00",
        "14:00 - 14:15","14:15 - 14:30","14:30 - 14:45","14:45 - 15:00",
        "15:00 - 15:15","15:15 - 15:30","15:30 - 15:45","15:45 - 16:00",
        "16:00 - 16:15","16:15 - 16:30","16:30 - 16:45","16:45 - 17:00",
        "17:00 - 17:15","17:15 - 17:30","17:30 - 17:45","17:45 - 18:00",
        "18:00 - 18:15","18:15 - 18:30","18:30 - 18:45","18:45 - 19:00",
        "19:00 - 19:15","19:15 - 19:30","19:30 - 19:45","19:45 - 20:00",
        "20:00 - 20:15","20:15 - 20:30","20:30 - 20:45","20:45 - 21:00",
        "21:00 - 21:15","21:15 - 21:30","21:30 - 21:45","21:45 - 22:00",
        "22:00 - 22:15","22:15 - 22:30","22:30 - 22:45","22:45 - 23:00",
        "23:00 - 23:15","23:15 - 23:30","23:30 - 23:45","23:45 - 00:00"]);

これは機能しています、 ここに画像の説明を入力

しかし、d3.min() や d3.max() を使用するなど、よりエレガントなものに移行したいと考えていました。しかし、これは機能していません。これが私のコードです。

x.domain([d3.min(json, function(d){return d["time"]}),d3.max(json, function(d){return d["time"]})]);

そしてグラフィック結果。 ここに画像の説明を入力

2 つの質問があります。

1- ドメインを 1 行で定義する方法はありますか? 時間スケールを確認しましたが、それをコードに統合する方法と、四半期間隔で使用できるかどうかがわかりません。使用する場合scale.ticks(d3.time.minutes, 15)、ドメインと JSON データ定義を一致させる方法がわかりません。

2- 最初のチャートの下を見ると、ティック テキストが上書きされています。時間だけを表現したいと思います (4 四半期ごとに 1 ティック)。どうやってやるの？

前もって感謝します。

4

2 に答える 2

4

現在所有しているドメインを定義するには、このコードを使用します。

 x.domain(json.map(function(d) {return d["time"];} ));

時間軸をフォーマットするための通常の関数 (実際にはminとmax) が機能しない理由は、Javascript に関する限り、日付が単なる文字列であるためです。時間固有の軸のものを使用できるようにするには、それらを日付に解析する必要があります。そのためには、間隔の開始点と終了点のどちらを取るかを決定する必要があります。

ドキュメントには、日付と時刻の解析とフォーマットに関する詳細が記載されています。

于 2013-04-03T09:39:10.950 に答える