d3.js predefinita axis.tickFormat di orologio a 24 ore

mi piace molto il comportamento predefinito di axis.tickFormat durante la stampa le cose nel corso del tempo, e solo la creazione di mio asse x come questo:d3.js predefinita axis.tickFormat di orologio a 24 ore

var xAxisBottom = d3.svg.axis().scale(xScale);

sto usando la funzione di pennello, in modo che l'utente possa scalare lungo l'asse x, quindi i valori devono essere aggiornati di conseguenza. Se l'utente guarda i dati su un anno intero, le zecche con i mesi sono buone. Se l'utente guarda i dati nell'arco di un giorno, i segni con ore e minuti sono buoni. E così via.

La cosa positiva è che il comportamento predefinito dell'asse è simile a questo. La cosa brutta è che mostra le ore in AM/PM, e vorrei cambiarlo in un orologio di 24 ore.

So che posso impostare il mio tickFormat in base all'ampiezza corrente del pennello, ma in tal caso non so come ottenere qualcosa come l'immagine qui sotto, dove sono mescolati diversi formati.

enter image description here

Quindi, c'è un modo semplice per ottenere orologio a 24 ore invece di AM/PM?

fonte

2013-03-27 Joel

Non facile come in "chiama una singola riga di codice", ma è possibile eseguire facilmente il proprio formato dell'ora. Vedere here per un esempio. L'idea chiave è che hai un elenco di formati data e una funzione filtro che, data una data, restituisce true se il formato associato deve essere utilizzato. Nel tuo caso hai bisogno solo di due livelli, uno per visualizzare la data (se la data è mezzanotte) o l'ora (se la data è mezzogiorno).

fonte

2013-03-27 08:54:43

Ah okey, grazie per l'esempio. Non sapevo davvero come lasciare che ogni singolo tick avesse un formato temporale condizionale. Nel mio caso devo cambiare il formato dei tick in base all'arco temporale, quindi non avrò bisogno solo di due livelli, ma suppongo che una cosa del genere possa coprire anche il mio caso. – Joel

Scusa, non avevo capito che questo era esattamente ciò di cui avevo bisogno :). Devo solo cambiare alcuni dei formati – Joel

Vale la pena notare che se si utilizza l'ora UTC sull'asse anziché l'ora locale, d3 chiama internamente un diverso set di formattatori. È necessario:

  return (d3.utcSecond(date) < date ? formatMillisecond 
      : d3.utcMinute(date) < date ? formatSecond 
      : d3.utcHour(date) < date ? formatMinute 
      : d3.utcDay(date) < date ? formatHour 
      : d3.utcMonth(date) < date ? (d3.utcWeek(date) < date ? formatDay : formatWeek) 
      : d3.utcYear(date) < date ? formatMonth 
      : formatYear)(date);

invece delle chiamate a cui si fa riferimento nell'esempio collegato sopra. La modifica sostituisce "d3. utc XXX (data)" per "d3. tempo XXX (data)."

fonte

2017-02-04 18:10:55

d3.js predefinita axis.tickFormat di orologio a 24 ore

risposta

Problemi correlati