d3.js domyślny axis.tickFormat do 24 godzinnym

bardzo podoba mi się domyślnym zachowaniem axis.tickFormat podczas drukowania, co z biegiem czasu, a tylko tworzenie moje osi x tak:d3.js domyślny axis.tickFormat do 24 godzinnym

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

używam funkcję pędzla, aby użytkownik mógł przeskalować wzdłuż osi X, a więc jego wartości muszą zostać odpowiednio zaktualizowane. Jeśli użytkownik patrzy na dane przez cały rok, oznacza to, że tykanie odbywa się miesiącami. Jeśli użytkownik przegląda dane w ciągu jednego dnia, oznacza to, że liczba godzin i minut jest wysoka. I tak dalej.

Dobrą rzeczą jest to, że domyślne zachowanie osi jest takie. Najgorsze jest to, że pokazuje godziny w godzinach przedpołudniowych i chciałbym to zmienić na zegar 24-godzinny.

Wiem, że mogę ustawić własny tickFormat w oparciu o aktualną rozpiętość pędzla, ale w tym przypadku nie wiem, jak uzyskać coś podobnego do poniższego obrazu, gdzie różne formaty są mieszane.

enter image description here

Tak, to istnieje prosty sposób, aby uzyskać 24-godzinny zegar zamiast AM/PM?

Źródło

2013-03-27 Joel

Nie jest to łatwe, jak w przypadku "wywoływania pojedynczej linii kodu", ale można łatwo przetworzyć własny format czasu. Zobacz przykład here. Kluczową ideą jest to, że masz listę formatów daty i funkcję filtru, która, biorąc pod uwagę datę, zwraca wartość true, jeśli ma być używany skojarzony format. W twoim przypadku potrzebujesz tylko dwóch poziomów, jednego do wyświetlania daty (jeśli data jest północy) lub czasu (jeśli data jest godzina dwunasta).

Źródło

2013-03-27 08:54:43

Ah okey, dzięki za przykład. Tak naprawdę nie wiedziałem, jak pozwolić każdemu z poszczególnych ticków mieć warunkowy format czasu. W moim przypadku muszę zmienić format tyknięć na podstawie przedziału czasowego, więc nie będę potrzebował tylko dwóch poziomów, ale myślę, że coś takiego mogłoby również pokryć moją sprawę. – Joel

Niestety, nie zdawałem sobie sprawy, że to jest dokładnie to, czego potrzebuję :). Muszę tylko zmienić niektóre formaty – Joel

Warto zauważyć, że jeśli używasz czasu UTC na osi zamiast czasu lokalnego, to d3 wywołuje wewnętrzny zestaw formaterów. Potrzebujesz tego:

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

zamiast połączeń przywołanych w powyższym łączonym przykładzie. Zmiana polega na zastąpieniu "d3. utc XXX (data)" dla "d3. czas XXX (data)."

Źródło

2017-02-04 18:10:55

d3.js domyślny axis.tickFormat do 24 godzinnym

Odpowiedz

Powiązane problemy