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.
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.
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