Nie ma wykresu bez dobrze opisanych osi, które mówią nam jak odczytywać dane z wykresu i co reprezentują. Są więc istotnym elementem, którego nie można pominąć. Na szczęście D3.js udostępnia nam grupę funkcji, które pozwalają w łatwy sposób dodać i dostosowywać wygląd osi.
Inne artykuły z serii o D3.js
- Tworzenie prostego wykresu liniowego
- Obsługa zdarzeń
Osie w D3.js
Do dodania osi możemy skorzystać z przygotowanych funkcji, które możemy podzielić na dwie grupy - pierwsza do tworzenia (osi pionowych i poziomych) i druga do dostosowywania wyglądu.
Do tworzenia osi mamy 4 metody:
- axisTop() - oś pozioma, gdzie etykiety są powyżej osi
- axisBottom() - oś pozioma, gdzie etykiety jest poniżej osi
- axisLeft() - oś pionowa z etykietą po lewej stronie
- axisRight() - oś pionowa z etykietą po prawej stronie
Przy wywoływaniu każdej z metod możemy przekazać funkcję, która będzie mapowała nasze wartości z osi na pozycję w svg - możemy wykorzystać tą samą funkcję skali, której użyliśmy przy rozmieszczaniu punktów wykresu. Druga opcja to pominięcie tego przy tworzeniu osi i wywołanie funkcji .scale(). Musimy wybrać jedną z dwóch metod ponieważ bez tego nie powstanie oś i dostaniemy błąd.
Kolejne funkcje służą już tylko do dostosowywania wyglądu wykresu. Mamy tu kilka opcji, które możemy wykorzystać:
- ticks(), tickArguments() - służy do ustawiania kroku wyświetlania etykiety (ile ich chcemy na wykresie) oraz do jej formatowania. jeżeli chcemy tylko ustawić formatowanie możemy skorzystać z tickFormat
- tickValues() - zamiast ustawiać ilość lub krok etykiety możemy bezpośrednio podać jakie etykiety nas interesują.
- tickFormat() - funkcja ustawiająca format wyświetlanych etykiet; najlepiej skorzystać tutaj z funkcji d3-format
- tickSizeInner() - ustawiamy długość słupków osi
- tickSizeOuter() - jest to wielkość krańcowych słupków osi (słupki, które ograniczają osie z obu stron)
- tickPadding() - odległość pomiędzy etykietą a słupkiem osi
Pomiędzy ticks i tickArguments jest tylko różnica w zapisie - tickArguments([10,'0.1f']) jest równy w zapisowi ticks(10, "0.1f").
Dodatkowo jeżeli ustawiamy rozmiar wewnętrznych i zewnętrznych słupków na taką samą wartość to możemy, zamiast ustawiać osobno każdą wartość, wykorzystać funkcję tickSize().
Jak teraz wygląda dodanie takich osi?
Większość elementów opisałem już wyżej i jedyne co zostało do zrobienia to odpowiednie ułożenie osi. Aby to zrobić poprawnie musimy zerknąć jakie wartości ustaliliśmy przy skalowaniu wykresu - oś X przesuwamy 370px w dół natomiast oś Y przesuwamy o 20px w prawo. Ostatni krok to wywołanie funkcji, która wyrysuje nasze osie w elemencie g
Po dodaniu osi zaczyna to wyglądać jak prawdziwy wykres. Teraz możemy bawić się wykresem by dopracować wygląd, dodać animacje, tooltipy i inne elementy, które go uatrakcyjnią.
