web-dev-qa-db-fra.com

Comment afficher les dates sur l'axe des x pour nvd3 / d3.js?

J'utilise nvd3, mais je pense que c'est une question générale d3.js sur l'échelle de temps et le formatage. J'ai créé un exemple simple qui illustre le problème (voir le code ci-dessous):

Si j'omets .tickFormat pour le xAxis, cela fonctionne très bien sans formatage de la date. Avec l'exemple ci-dessous, j'obtiens l'erreur:

TypeError non intercepté: l'objet 1326000000000 n'a pas de méthode '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'
        }
    ];
 }

L'exemple (maintenant corrigé) est en nvd3 avec axe de date.

d3.jsnvd3.js
50
Ultrasaurus

Essayez de créer un nouvel objet Date avant que le tick de l'axe des x ne soit transmis au formateur:

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

Consultez la documentation de d3.time.format pour voir comment vous pouvez personnaliser la chaîne de formatage.

63
seliopou

En ajoutant à la réponse de seliopou, pour aligner correctement les dates avec l'axe des x, essayez ceci:

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