2012-12-20 7 views
7

Debito della divulgazione - Sono terribile su javascript, ma sto cercando di imparare!Nuovo su nvD3 - come posso far apparire i timestamp unix come date sull'asse x?

Ho un array con alcune voci come queste in esso:

[1349,0136 milioni] => 232

La chiave è un timestamp UNIX, il valore è il $ in vendite da quel giorno. Attualmente sto graficamente su un grafico multibar, che funziona alla grande.

Il problema è il mio asse x, che è attualmente definito così:

chart.xAxis 
.tickFormat(d3.format(',f')); 

emette i timestamp unix come int dritto contro le etichette asse xe presso descrizione. Voglio provare a farlo uscire come D-M-Y o un simile indicatore di data leggibile dall'uomo.

Il più vicino che ho trovato è questo pezzo di codice:

chart.xAxis.tickFormat(function(d) { 
     var dx = testdata[0].values[d] && testdata[0].values[d].x || 0; 
    return d3.time.format('%x')(new Date(dx)) 
}); 

Ma Ho difficoltà a capire quello che sta facendo e non può attuare il mio particolare grafico. Il codice attuale è simile al seguente:

nv.addGraph(function() { 
var chart = nv.models.multiBarChart() 
      .stacked(true) 

chart.xAxis 
    .tickFormat(d3.format(',f')); 

chart.yAxis 
    .tickFormat(function(d) { return '$' + d3.format(',f')(d) }); 

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

nv.utils.windowResize(chart.update); 

return chart; 
}); 

Qualcuno potrebbe spiegare come farlo funzionare e, cosa più importante, perché? Apprezzo qualsiasi guida!

risposta

4

I timestamp JavaScript sono im millisecondi, quindi è necessario moltiplicare il timbro Unix per 1000 prima di utilizzarlo.

+1

Grazie per il suggerimento. Le date (come memorizzate nel db SQL) sono già in un formato leggibile (YYYY/MM/DD) già, ma le sto convertendo con strtotime (funzione PHP) quando le estraggo dal db. So che questo sembra contro-intuitivo, ma sono convinto che l'assegnazione del valore reale debba avvenire in unix stamp, al fine di spaziarli appropriatamente lungo l'asse. Ad ogni modo - dovrebbe già essere in s piuttosto che in ms. – mcl

14

ho risolto il problema, non appena ho aperto la bontà (d'oh!)

Ecco cosa ha funzionato per me

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

e il trucco è stato quello di riformattare i dati per nvd3 DOPO questo viene creato l'asse

+1

forse se 5 persone trovassero questa risposta utile e potenziata Potrei infrangere anche sui punti di reputazione – CQM

+5

Ti consiglierei di dichiarare il formato dell'ora al di fuori della funzione tickFormat, in modo che tu non stia creando una nuova istanza di formato orario per ogni tick che vuoi da visualizzare (che sarebbe lento e sprecare memoria). Allo stesso modo, consiglio di convertire i dati in oggetti Date JavaScript come una fase di pre-elaborazione, piuttosto che come un effetto collaterale dei tick di formattazione. In questo modo, se ci sono altri posti in cui fai riferimento alla data, è sempre un oggetto Date appropriato piuttosto che UNIX secondi o peggio, una stringa. – mbostock

Problemi correlati