2013-03-27 6 views
7

私は本当にaxis.tickFormatのデフォルト動作のような時間をかけて物事をプロットすると、ちょうどこのように私のx軸を作成:d3.jsデフォルトaxis.tickFormat

var xAxisBottom = d3.svg.axis().scale(xScale); 

私が使用していますユーザがx軸に沿って拡大縮小することができるようにブラシ機能を使用するので、それに応じて値を更新する必要があります。ユーザーが年間を通してデータを調べる場合は、数ヶ月のティックが良いです。ユーザーが1日以上のデータを見ると、時間と分のティックが良い。等々。

良いことは、軸のデフォルト動作が次のようなことです。悪い点は、午前/午後に時間が表示され、それを24時間の時計に変更したいということです。

ブラシの現在のスパンに基づいて独自のtickFormatを設定できますが、その場合、さまざまなフォーマットが混在する下の図のようなものを取得する方法はわかりません。

enter image description here

ので、24時間制の代わりに、AM/PMを取得する簡単な方法は何ですか?

答えて

8

「1行のコードを呼び出す」のように簡単ではありませんが、独自の時間形式を簡単に使用できます。例については、hereを参照してください。重要なアイデアは、日付フォーマットとフィルタ関数のリストがあり、日付を指定すると、関連するフォーマットを使用する場合はtrueを返すということです。あなたのケースでは、日付(深夜である場合)または時刻(日付が12時である場合)を表示するために、2つのレベルのみが必要です。

+0

ああ、ありがとうございました。私は、個々のティックに条件付きの時間形式を持たせる方法は本当に分かりませんでした。私の場合は、タイムスパンを基準にしてティックのフォーマットを変更する必要があるので、私は2つのレベルしか必要としませんが、私のケースもカバーすることができると思います。 – Joel

+0

申し訳ありませんが、これは実際に私が必要としているものであることを認識していません:)。私はちょうどいくつかのフォーマットを変更する必要があります – Joel

1

ローカル時間ではなく軸上でUTC時間を使用している場合、d3は内部的に異なるフォーマッタセットを呼び出します。上記のリンクされた例で参照されている呼び出しの代わりに、

  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。時間 XXX(日)"の "d3。utc XXX(date)"の代わりになります。