d3.jsで時間軸と数分のカスタム軸フォーマッタを作成するにはどうすればよいですか？

Question

私はd3.jsでグラフを描いています。 x軸は時間（分）を表します。私はこの軸をhh:mm形式で表示したいと思います.d3内でこれをきれいに行う方法は見つけられません。

マイ軸コードは次のようになります。

[100, 115, 130, 140]のように見える分のラベルを生成

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

など

それらが生成されてきた後に私の現在のソリューションは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の使用を避けています。これらのラベルを作成するより良い方法はありますか？あなたは絶対時間を持っている場合は

Answer 1

は、おそらくJavaScriptのDate objectsではなく、単純な数にごXデータを変換したい、とあなたはd3.time.scaleとd3.time.formatを使用します。 「HH：MM」の一例軸の形式は次のようになります。

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

そして実際に、あなたはまったくダニのフォーマットを指定する必要はないかもしれません。あなたのスケールの領域とダニの数に応じて、default time scale formatで十分でしょう。また、完全な制御が必要な場合は、目盛間隔を目盛りに指定することもできます。例えば、ダニごとに15分間、あなたは言うかもしれない：あなたは相対時間を持っている場合は

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

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

分と時間だけが表示されるので、あなたが選んだエポックは問題ではありません。ここでは期間の分布をフォーマットするために、この技術を使った例です：

• http://bl.ocks.org/3048166