Stwórz własny wykres SVG przy użyciu react-native-svg oraz D3.js.

Rysowanie wykresów w React Native jest łatwiejsze do powiedzenia niż do zrobienia. Istnieją biblioteki oferujące gotowe rozwiązania, ale w większości przypadków będziesz chciał stworzyć własny wykres o specyficznym wyglądzie. Celem tego artykułu jest przeprowadzenie Cię przez proces tworzenia własnego wykresu od zera.

Wykres, który zbudujemy, wygląda następująco:

Instalacja zależności

Jak wspomniano w tytule: potrzebujemy dwóch bibliotek: react-native-svg i d3.js.

npm i --save d3
npm i --save react-native-svg
react-native link react-native-svg

Zaczynajmy!

Tworzenie wykresu słupkowego, który chcemy narysować, odbywa się od dołu do góry. Problem polega na tym, że układ współrzędnych Y w formacie SVG działa od góry do dołu. Aby ułatwić sobie rysowanie, zastosujemy pewną technikę.

Będziemy rysować wykres, używając ujemnych współrzędnych Y, co będzie prostsze. Na przykład dla wartości 5 narysujemy słupek od 0 do -5.

Na koniec będziemy musieli przesunąć wykres, ponieważ w tej chwili znajduje się on poza obszarem roboczym SVG.

Zróbmy to teraz naprawdę.

Umieśćmy element Rect wewnątrz SVG, abyśmy mogli coś zobaczyć.

Przesuwamy wykres wzdłuż osi Y o wysokość wykresu. Zauważ, że współrzędna Y elementu Rect wynosi -15, ponieważ narysowaliśmy go poza obszarem roboczym SVG, a następnie „wciągnęliśmy” go do środka za pomocą translacji. Możesz przetestować ten komponent – powinieneś zobaczyć prostokąt.

Generowanie osi

Zaczniemy od dolnej osi. Schemat, który widzieliśmy wcześniej, był uproszczony, aby łatwiej było zrozumieć koncepcję translacji. Punkt $Y = 0$ to współrzędna początkowa słupków. Definiujemy marginesy wykresu – to właśnie tam znajdzie się wszystko, co otacza sam wykres (na przykład etykiety: Sty, Lut... itd.)

Jeśli przyjrzysz się uważnie, zauważysz, że dolna oś jest nieco odsunięta od samego wykresu. Ponieważ rysujemy, używając ujemnych współrzędnych, a chcemy, aby oś znajdowała się pod wykresem, przypiszemy jej współrzędną Y = 2.

Generowanie słupków

Słupki na tym wykresie to po prostu elementy Rect z zaokrąglonymi krawędziami (border radius). W tym miejscu będziemy potrzebować danych. Nasze dane dla wykresu słupkowego będą uporządkowaną listą par klucz-wartość. W JavaScript przedstawimy to jako tablicę obiektów.

Uwaga: Na potrzeby tego poradnika pomijam etap walidacji propsów, aby zachować jak największą prostotę.

Jak zdecydować, jakie wartości x, y height (wysokość) i width (szerokość) nadać elementowi w Rect?

Musimy pamiętać, że wysokość w SVG działa od góry do dołu, nawet jeśli rysujemy w układzie współrzędnych ujemnych. Oznacza to, że punkt początkowy (x, y) będzie szczytem słupka, a wysokość height reprezentuje dystans między tym punktem a podstawą (Y = 0). 

Oto ilustracja, która pomoże zrozumieć tę koncepcję:

Pozycja i wysokość słupków

Teraz najtrudniejszą częścią jest wyznaczenie współrzędnych x i y. Chcemy osiągnąć efekt, w którym najwyższa wartość sięga samej góry wykresu, więc słupki muszą być skalowane w zależności od wartości maksymalnej.

Użyjmy do tego d3-scale Point scales i d3-scale Linear scales. W skrócie: skale pozwalają nam zdefiniować konkretny zakres i dziedzinę, a następnie wykorzystamy je do określenia  x and y. Jedyną istotną rzeczą, jaką zrobimy po obliczeniu skali, jest odjęcie połowy szerokości słupka od współrzędnej X. Ponieważ używamy skali punktoweje, punkty te z założenia nie mają szerokości – traktujemy więc te punkty jako środki naszych słupków.

Uwaga: Nie użyłem skali pasmowej, ponieważ ma ona stały margines i zmienną szerokość słupka, a ja potrzebowałem odwrotnego efektu: stałej szerokości słupka i zmiennego marginesu. Skala punktowa była dla mnie prostsza, ale jeśli potrzebujesz zmiennej szerokości, skala pasmowa będzie lepszym wyborem dla współrzędnej X.
 

Kod ten stworzył następujący wykres:

Bar chart

Dodajmy kilka szczegółów

Następnie dodamy kilka szczegółów, korzystając z komponentów, których już wcześniej używaliśmy. Narysujemy dwie przerywane linie: jedną na samej górze i jedną w połowie wysokości wykresu. Dodamy również etykietę nad górną linią, która będzie wyświetlać zaokrągloną wartość maksymalną wraz z jednostką.  Zaokrąglenie oraz jednostka będą dwoma nowymi propsami.

Oto ostateczny kod:

Oto wynk końcowy:

Mamy nadzieję, że podobał Ci się ten tutorial. Istnieje znacznie więcej możliwości, jakie oferują D3.js oraz react-native-svg. Ten krótki przegląd powinien pomóc Ci oswoić się z podstawami i dostarczyć wiedzy niezbędnej do tworzenia własnych, pięknych wykresów.