web-dev-qa-db-fra.com

comment formater l'heure sur xAxis, utilisez d3.js

Selon la démo sur http://bl.ocks.org/mbostock/3883245

Je ne sais pas comment formater l'heure sur xAxis

voici mon code: js:


 var data = [{
 "creat_time": "2013-03-12 15:09:04", 
 "record_status": "ok", 
 "roundTripTime": "16" 
 }, {
 "creat_time": "2013-03-12 14:59:06", 
 "record_status": "ok", 
 "roundTripTime": "0" 
 }, {
 "creat_time": "2013-03-12 14:49:04", 
 "record_status": "ok", 
 "roundTripTime": "297" 
 }, {
 "creat_time": "2013-03-12 14:39:06", 
 "record_status": "ok", 
 "roundTripTime": "31" 
 }, {
 "creat_time": "2013-03-12 14:29:03", 
 "record_status": "ok", 
 "roundTripTime": "0" 
 }]; 
 var margin = {en haut: 20, à droite: 20, en bas: 30, à gauche: 50}; 
 var width = 960 - margin.left - margin.right; 
 var height = 500 - margin.top - margin.bottom; 
 var parseDate = d3.time.format ("% Y-% m-% d% H:% M:% S"). parse; 
 var x = d3.time.scale () 
 .range ([0, width]); 

 var y = d3.scale.linear () 
 .range ([height, 0]); 

 var xAxis = d3.svg.axis () 
 .échelle (x) 
 .orient ("en bas"); 

 var yAxis = d3.svg.axis () 
 .échelle (y) 
 .orient ("left"); 

 var line = d3.svg.line () 
 .x (fonction (d) {retour x (d.creat_time);}) 
 .y (fonction (d) {retourne y (d.roundTripTime);}); 
....
 var svg = d3.select ("body"). append ("svg") 
 .attr ("largeur", largeur + marge.left + marge.right) 
 .attr ("height", height + margin.top + margin.bottom) 
 .append ("g") 
 .attr ("transformer", "translate (" + margin.left + "," + margin.top + ")"); 

 data.forEach (fonction (d) {
 d.creat_time = parseDate (d.creat_time); 
 d.roundTripTime = + d.roundTripTime; 
}); 

 x.domain (d3.extent (data, function (d) {return d.creat_time;})); 
 y.domain (d3.extent (data, function (d) {return d.roundTripTime;})); 

 svg.append ("g") 
 .attr ("classe", "axe x") 
 .attr ("transformer", "traduire (0," + hauteur + ")") 
 .call (xAxis); 

 svg.append ("g") 
 .attr ("classe", "axe des y") 
 .call (yAxis) 
 .append ("text") 
 .attr ("transformer", "faire pivoter (-90)") 
 .attr ("y", 6) 
 .attr ("dy", ".71em") 
 .style ("text-anchor", "end") 
 .text ("temps de retour (ms)"); 

 svg.append ("chemin") 
 .datum (data) 
 .attr ("classe", "ligne") 
 .attr ("d", ligne);

c'est svg: enter image description here

En svg, l'heure est à 12 heures, mais dans mes données, l'heure est à 24 heures . comment garder le même format sur svg et data?

Toute aide est appréciée. (ps: j'espère que mon anglais ne vous dérange pas, c'est tellement mauvais.)

javascriptd3.js
49
L.T

Vous pouvez utiliser la fonction tickFormat sur l'objet axis comme ci-dessous

var xAxis = d3.svg.axis()
    .scale(x)
    .orient("bottom")
    .tickFormat(d3.time.format("%H"));

Le %H spécifie hour (24-hour clock) as a decimal number [00,23]. Cochez ce lien Format de l'heure D3 pour plus d'informations

Vous pouvez consulter un exemple de travail dans cet affluent exemple heure par heure

69
olly_uk

La réponse acceptée est certes correcte, mais dans mon cas, j’avais besoin de flexibilité pour que les formats s’adaptent à différentes échelles (pensez au zoom), mais aussi pour que l’horloge de 24 heures soit utilisée. La clé est de définir un format de temps multi-résolution. Voir la page Documentation pour plus de détails.

Mon code:

var axisTimeFormat = d3.time.format.multi([
    [".%L", function(d) { return d.getMilliseconds(); }],
    [":%S", function(d) { return d.getSeconds(); }],
    ["%H:%M", function(d) { return d.getMinutes(); }],
    ["%H:%M", function(d) { return d.getHours(); }],
    ["%a %d", function(d) { return d.getDay() && d.getDate() != 1; }],
    ["%b %d", function(d) { return d.getDate() != 1; }],
    ["%B", function(d) { return d.getMonth(); }],
    ["%Y", function() { return true; }]
 ]);

var xAxis = d3.svg.axis()
    .scale(x)
    .orient("bottom")
    .tickFormat(axisTimeFormat);
28
pilotcam

En v4,

...
var scaleX = d3.scaleTime().range([0, width]);
var axisBottom = d3.axisBottom(scaleX)
                   .ticks(d3.timeMinute, 10); // Every 10 minutes
...

Notez que vous utilisez d3.timeMinute - pas d3.timeMinutes

1
KimchiMan

Je veux ajouter ce lien à une page de démonstration géniale. C'est un terrain de jeu lorsque vous pouvez choisir le spécificateur de format dont vous avez besoin pour votre cas. C'est très utile lorsque vous ne vous souvenez pas/ne savez pas quel spécificateur de format vous devez transmettre à votre fonction d3.timeFormat.

Je tiens également à noter que, si vous avez d3 version 4, vous devez utiliser d3.timeFormat function, au lieu de d3.time.format.

0
Mikhail Shabrikov