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

J'utilise nvd3, mais je pense que c'est un D3 général.question 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, il fonctionne très bien sans formatage de date. Avec l'exemple ci-dessous, j'obtiens l'erreur:

Uncaught TypeError: 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 dans nvd3 avec axe de date.

49
demandé sur Peter Mortensen 2012-12-27 21:45:52

2 réponses

Essayez de créer un nouvel objet Date avant que la coche de l'axe x ne soit transmise au formateur:

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

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

63
répondu seliopou 2013-04-27 07:52:01

En ajoutant à la réponse de seliopou, pour aligner correctement les dates avec l'axe des abscisses, 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
33
répondu rtexal 2014-03-15 02:08:49