8

時間の経過とともに物事をプロットするときのaxis.tickFormatのデフォルトの動作が本当に好きで、次のようにx軸を作成するだけです。

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

ユーザーがx軸に沿って拡大縮小できるように、ブラシ機能を使用しているため、それに応じて値を更新する必要があります。ユーザーが1年間のデータを見る場合、月単位の目盛りが適切です。ユーザーが1日以上のデータを見る場合、時間と分でチェックするのが適切です。等々。

良い点は、軸のデフォルトの動作が次のようになっていることです。悪い点は、AM / PMで時刻が表示されることです。これを、24時間制に変更したいと思います。

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

ここに画像の説明を入力してください

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

4

3 に答える 3

9

「1行のコードを呼び出す」のように簡単ではありませんが、独自の時間形式を簡単に作成できます。例については、こちらをご覧ください。重要なアイデアは、日付形式のリストと、日付を指定すると、関連付けられた形式を使用する場合にtrueを返すフィルター関数があることです。あなたの場合、必要なレベルは2つだけです。1つは日付（日付が深夜の場合）または時刻（日付が正午の場合）を表示するためのものです。

于 2013-03-27T08:54:43.400 に答える
3

軸で現地時間ではなく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。time XXX（date）」の代わりに「d3.utcXXX（date）」を使用することです。

于 2017-02-04T18:10:55.577 に答える
0

d3v4以降の場合。axisBottomの時間をダニで指定します

//Print ticks for every minute
this.xAxis = axisBottom(this.xScale).ticks(timeMinute.every(1));

//Print ticks for every hour
this.xAxis = axisBottom(this.xScale).ticks(timeHour.every(1));

それ以外の場合は、tickformatを使用して値をPMにフォーマットできます

于 2020-02-04T07:30:02.810 に答える