17

d3.jsでグラフ化するデータセットがあります。x軸は時間（分単位）を表します。この軸をフォーマットで表示したいのhh:mmですが、d3内でこれをきれいに行う方法が見つかりません。

私の軸コードは次のようになります：

svg.append('g')
   .attr('class', 'x axis')
   .attr('transform', 'translate(0,' + height + ')')
   .call(d3.svg.axis()
     .scale(x)
     .orient('bottom'));

[100, 115, 130, 140]などのようなラベルを数分で生成します。

私の現在の解決策は、text要素が生成された後に要素を選択し、それらを関数でオーバーライドすることです。

   svg.selectAll('.x.axis text')
   .text(function(d) { 
       d = d.toFixed();
       var hours = Math.floor(d / 60);
       var minutes = pad((d % 60), 2);
       return hours + ":" + minutes;
   });

[1:40, 1:55, 2:10]これは、などのような軸ティックを出力します。

しかし、これはぎこちなく感じ、の使用を避けますd3.format。これらのラベルを作成するためのより良い方法はありますか？

4

1 に答える 1

53

絶対時間があれば、 xデータを単純な数値ではなくJavaScript Dateオブジェクトに変換してから、 d3.time.scaleとd3.time.formatを使用することをお勧めします。軸の「hh：mm」形式の例は次のとおりです。

d3.svg.axis()
    .scale(x)
    .orient("bottom")
    .tickFormat(d3.time.format("%H:%M"));

実際には、目盛りの形式をまったく指定する必要がない場合があります。スケールのドメインとティック数によっては、デフォルトのタイムスケール形式で十分な場合があります。または、完全に制御したい場合は、目盛りの目盛り間隔を指定することもできます。たとえば、15分ごとのダニの場合、次のように言うことができます。

d3.svg.axis()
    .scale(x)
    .orient("bottom")
    .ticks(d3.time.minutes, 15)
    .tickFormat(d3.time.format("%H:%M"));

相対的な時間、つまり期間がある場合（したがって、絶対的な日付ではなく分を表す数値がある場合）、任意のエポックを選択してオンザフライで変換することにより、これらを日付としてフォーマットできます。そうすれば、データ自体を数値のままにすることができます。例えば：

var formatTime = d3.time.format("%H:%M"),
    formatMinutes = function(d) { return formatTime(new Date(2012, 0, 1, 0, d)); };

分と時間のみが表示されるため、どのエポックを選択してもかまいません。この手法を使用して期間の分布をフォーマットする例を次に示します。

于 2012-07-02T01:57:25.757 に答える