d3.js Standard axis.tickFormat bis 24-Stunden-Uhr

ich wirklich wie das Standardverhalten von axis.tickFormat, wenn die Dinge über die Zeit aufgetragen, und genau wie diese meine x-Achse zu schaffen:d3.js Standard axis.tickFormat bis 24-Stunden-Uhr

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

Ich verwende die Pinselfunktion, so dass der Benutzer entlang der X-Achse skalieren kann, und so müssen seine Werte entsprechend aktualisiert werden. Wenn der Benutzer Daten über ein ganzes Jahr betrachtet, sind Ticks mit Monaten gut. Wenn der Benutzer Daten über einen Tag hinweg betrachtet, sind Ticks mit Stunden und Minuten gut. Und so weiter.

Die gute Sache ist, dass das Standardverhalten der Achse wie folgt ist. Die schlechte Sache ist, dass es die Stunden in AM/PM zeigt, und ich möchte das zu einer 24-Stunden-Uhr ändern.

Ich weiß, dass ich mein eigenes tickFormat basierend auf der aktuellen Spannweite des Pinsels festlegen kann, aber in diesem Fall weiß ich nicht, wie man etwas wie das Bild unten erhält, wo verschiedene Formate gemischt werden.

enter image description here

Also, gibt es eine einfache Möglichkeit, 24 Stunden Uhr zu bekommen statt AM/PM?

Quelle

2013-03-27 Joel

Nicht einfach wie in "eine einzige Zeile Code aufrufen", aber Sie können Ihr eigenes Zeitformat leicht genug rollen. Ein Beispiel finden Sie in here. Die Grundidee besteht darin, dass Sie eine Liste von Datumsformaten und eine Filterfunktion haben, die bei einem Datum den Wert true zurückgibt, wenn das zugehörige Format verwendet werden soll. In Ihrem Fall würden Sie nur zwei Ebenen benötigen, eine zur Anzeige des Datums (wenn das Datum Mitternacht ist) oder der Uhrzeit (wenn das Datum 12 Uhr mittags ist).

Quelle

2013-03-27 08:54:43

Ah okey, danke für das Beispiel. Ich wusste nicht wirklich, wie jeder einzelne Tick ein bedingtes Zeitformat haben sollte. In meinem Fall muss ich auch das Format der Ticks basierend auf der Zeitspanne ändern, also brauche ich nicht nur zwei Level, aber ich denke, dass so etwas auch meinen Fall abdecken könnte. – Joel

Sorry, habe nicht realisiert, dass das eigentlich genau das ist was ich brauche :). Ich muss nur einige der Formate ändern – Joel

Es ist erwähnenswert, dass d3, wenn Sie die UTC-Zeit auf Ihrer Achse anstatt der lokalen Zeit verwenden, intern einen anderen Satz Formatierer aufruft. Sie benötigen Folgendes:

  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);

anstelle der Aufrufe, auf die im verknüpften Beispiel oben verwiesen wird. Die Änderung soll "d3. utc XXX (Datum)" für "d3 ersetzen. Zeit XXX (Datum)."

Quelle

2017-02-04 18:10:55

d3.js Standard axis.tickFormat bis 24-Stunden-Uhr

Antwort

Verwandte Themen