web-dev-qa-db-ja.com

nvd3 / d3.jsのx軸に日付を表​​示するにはどうすればよいですか？

私はnvd3を使用していますが、これは時間スケールとフォーマットに関するd3.jsの一般的な質問だと思います。問題を説明する簡単な例を作成しました（以下のコードを参照）。

XAxisの.tickFormatを省略すると、日付の書式設定なしで正常に機能します。以下の例では、エラーが発生します：

不明なTypeError：オブジェクト1326000000000にはメソッド 'getMonth'がありません

nv.addGraph(function() {

    var chart = nv.models.lineChart();

    chart.xAxis
         .axisLabel('Date')
         .rotateLabels(-45)
         .tickFormat(d3.time.format('%b %d')) ;

     chart.yAxis
         .axisLabel('Activity')
         .tickFormat(d3.format('d'));

     d3.select('#chart svg')
         .datum(fakeActivityByDate())
       .transition().duration(500)
         .call(chart);

     nv.utils.windowResize(function() { d3.select('#chart svg').call(chart) });

     return chart;
});

function days(num) {
    return num*60*60*1000*24
}

/**************************************
 * Simple test data generator
 */

function fakeActivityByDate() {
    var lineData = [];
    var y = 0;
    var start_date = new Date() - days(365); // One year ago

    for (var i = 0; i < 100; i++) {
        lineData.Push({x: new Date(start_date + days(i)), y: y});
        y = y + Math.floor((Math.random()*10) - 3);
    }

    return [
        {
            values: lineData,
            key: 'Activity',
            color: '#ff7f0e'
        }
    ];
 }

例（現在修正済み）は日付軸付きnvdです。

d3.jsnvd3.js
50
Ultrasaurus

X軸の目盛りがフォーマッタに渡される前に、新しいDateオブジェクトを作成してください。

.tickFormat(function(d) { return d3.time.format('%b %d')(new Date(d)); })

d3.time.format のドキュメントを参照して、フォーマット文字列をカスタマイズする方法を確認してください。

63
seliopou

Seliopouの答えに加えて、日付をx軸に正しく合わせるために、これを試してください：

chart.xAxis
      .tickFormat(function(d) {
          return d3.time.format('%d-%m-%y')(new Date(d))
      });

  chart.xScale(d3.time.scale()); //fixes misalignment of timescale with line graph
34
rtexal