awpixel na Unsplash
za każdym razem, gdy pracuję nad projektem z wizualizacjami, kierownicy projektów zazwyczaj reagują z przerażeniem, Kiedy mówię, że nie używam D3. Skąd ta troska? Dlaczego miałbym nie używać D3?
odpowiadając na te pytania, musimy zrozumieć kontekst, w jakim D3 został stworzony., D3 został po raz pierwszy wydany w 2011 roku i był dość innowacyjny w tym czasie.
Zwykle to, co zobaczysz, to biblioteki, które dostarczają wykresy po wyjęciu z pudełka i z ogromną listą opcji. To może działać, ale problem polega na tym, że za każdym razem, gdy ktoś ma nowe wymagania, opcja musiałaby być dodana i wspierana. W końcu trafisz na język, w którym do definiowania wykresu używa się kilku obiektów. D3 przyjęło inne podejście, zamiast oferować pełne komponenty, oferuje oparte na danych funkcje pomocnicze do samodzielnego tworzenia tych komponentów.,
w tym czasie popularne były biblioteki takie jak jQuery i Backbone. Tworzenie własnych wykresów przy użyciu tych bibliotek byłoby wyzwaniem, zwłaszcza jeśli chcesz, aby były dynamiczne. Przeglądarki dopiero przyjmowały nowe nowoczesne standardy CSS, takie jak transitions, a bardziej nowoczesne właściwości, takie jak flex box, były jeszcze wieki od implementacji.
D3 rozwiązał wiele z tych problemów i bez wątpienia było to najprostsze podejście do implementacji wizualizacji w tamtym czasie. Jednak od tego czasu wiele się zmieniło., Mamy nowe nowoczesne frameworki, które wykorzystują bardziej elastyczne i ekspresyjne koncepcje, takie jak wirtualny DOM, a CSS ma tak wiele nowych możliwości dla układu i animacji.
zamiast automatycznie przeskakiwać do D3, pozwól mi wymienić kilka powodów, dla których powinieneś ponownie rozważyć jego użycie.
pracowałem z D3 wiele razy w ciągu ostatnich kilku lat i zaimplementowałem z nim wszelkiego rodzaju wizualizacje. Rozumiem ogólne pojęcia o D3 i nadal ciężko mi z nim pracować. Wszyscy, z którymi pracowałem, od juniorów po starszych programistów, również się z tym borykają., To, co robi wiele osób, w tym ja, polega na tym, że znajdujemy w Internecie przykład, który z grubsza odpowiada temu, czego szukamy, i modyfikujemy ten przykład, aby odpowiadał naszym potrzebom.
Jeśli chcemy dodać jakąś niestandardową funkcjonalność, prawdopodobnie zrobimy więcej przeszukiwania i znajdziemy coś, co wygląda poprawnie, spróbujemy zrozumieć, jak to działa i będziemy go modyfikować, dopóki nie zrobi tego, co chcemy.
czy to brzmi znajomo? Z drugiej strony, deweloperzy w dzisiejszych czasach są bardzo zaznajomieni z wirtualnymi bibliotekami DOM i są zaznajomieni z szablonami., Czy nie ma większego sensu, aby wykorzystać te umiejętności, a nie wprowadzenie biblioteki, która wymaga zupełnie innego sposobu myślenia?
łatwiej niż myślisz
Kiedy po raz pierwszy myślisz o tworzeniu własnych wykresów od zera, często czujesz się zmartwiony i przerażony. Może to brzmieć jak bardzo skomplikowany komponent do tworzenia, ale tak naprawdę nie jest, gdy go łamiesz. Weźmy przykład wykresu liniowego. Oto jak zrobiłbyś wykres liniowy w D3:
źródło: bl.ocks.,org
Oto jak zrobiłbym coś takiego używając Preact:
i CSS:
Source: JSFiddle
jest sporo kodu, ale używam tylko narzędzi, które już mam do dyspozycji, w tym przypadku Moja biblioteka widoku, która jest preact (może być cokolwiek, ale, react, vue, Angular itp), i nowoczesnych narzędzi CSS jak flexbox.,
przykład D3 wymaga poznania wielu pojęć na temat D3. Ta ostatnia wymaga jedynie wykorzystania posiadanej już wiedzy o bibliotece widoku. Argumentowałbym, że jest to łatwiejsze w utrzymaniu niż przykład D3, ponieważ każdy, kto zna bibliotekę widoku, powinien być w stanie wskoczyć do bazy kodu i zacząć wprowadzać modyfikacje.
nie zapominaj o rozmiarze pakietu
w zależności od typu wykresu i tego, jak wiele Tree-potrząsanie może zoptymalizować Twój Pakiet, D3 w najgorszym przypadku będzie importować 70+ KB kodu. Może to mieć wpływ na ładowanie witryny., Tak więc, chociaż prawdą jest, że piszesz więcej kodu niż oryginalny przykład D3, ogólnie rozpowszechniasz mniej kodu niż gdybyś użył D3.
ogólnie rzecz biorąc, podczas korzystania z kodu stron trzecich, zawsze ważne jest, aby pamiętać o kosztach korzystania z tego kodu. Jeśli potrzebujesz tylko jednej funkcji z biblioteki, czy zaimportujesz całą bibliotekę dla tej funkcji?, Tak, nie powinieneś zawsze wymyślać koła od nowa, ale musisz wziąć pod uwagę czas, aby poznać tę bibliotekę, rozmiar, który dodaje do Twojego pakietu, licencję tej biblioteki, wsparcie, które biblioteka będzie miała, wiarygodność opiekunów, zdolność do terminowego naprawiania błędów itp.
Canvas i HTML są często lepsze niż SVG
Jeśli zauważyłeś w przykładzie wcześniej, użyliśmy kombinacji HTML i SVG. Z jakiegoś powodu ludzie będą próbowali zaimplementować całe wykresy za pomocą SVGs, ale naprawdę nie ma takiej potrzeby. CSS jest obecnie znacznie potężniejszy niż SVG.,
na przykład SVG nie obsługuje natywnie zawijania tekstu. Gdybyśmy chcieli zrobić zawijanie tekstu, musielibyśmy to obliczyć w JavaScript:
źródło: bl.ocks.org
z HTML z drugiej strony, tak długo, jak white-spacejest ustawiony nanormal, to po prostu owinąć naturalnie.
elementy takie jak okręgi i prostokąty mogą być wykonywane w HTML i CSS. Możesz użyć transform I border-radius do tworzenia wszelkiego rodzaju kształtów., Jeśli chcesz zrobić wykres słupkowy w D3 z dwoma zaokrąglonymi rogami, nie możesz użyć rect, ponieważ będzie on zaokrąglał wszystkie cztery rogi, zamiast dwóch rogów, które chcesz zaokrąglać. Jedyną opcją byłoby użycie path.
jedynym powodem, dla którego używam znaczników SVG, jest tag path. Nadal jest to jedyny czysty sposób tworzenia dowolnych kształtów bez odpowiednika HTML.
Jeśli potrzebujesz dodatkowej wydajności, jest również znacznik canvas do rozważenia., W przypadku canvas będziesz musiał samodzielnie kodować podstawowe interakcje, ale ma to tę zaletę, że nie ma narzutu HTML lub SVG, który może zużywać pamięć i wolniej aktualizować. Poszczególne piksele na obszarze roboczym można aktualizować w dowolny sposób, dzięki czemu można zoptymalizować wizualizację i skalować ją. Nowe interfejsy API przeglądarek, takie jak OffscreenCanvas, pomogą również zwiększyć wydajność, gdy będą używane wewnątrz pracowników.
ale Canvas nie skaluje się jak SVG?,
bardzo często słyszałem, że canvas nie nadaje się do wizualizacji, ponieważ nie skaluje się tak dobrze jak SVG. Przy normalnym użyciu płótna, jeśli powiększysz lub pomniejszysz stronę lub użyjesz przeglądarki o wyższej rozdzielczości, twoje płótno wyjdzie pikselowo i rozmazane.
dzieje się tak, ponieważ podczas tworzenia płótna musisz określić, ile pikseli chcesz narysować., Kiedy ustawiamy atrybuty width I height może to wyglądać tak, jakbyśmy ustawiali rozmiar CSS, ale tak naprawdę ustawiamy rozmiar przestrzeni rysunkowej canvas. To nie to samo.
rzestrzeń rysowania 50×50 pikseli, ale rozciągnięta do 200×200 pikseli CSS, powodując pikselację.,
normalnie piksele CSS będą ustawione na ten sam rozmiar, co przestrzeń do rysowania płótna, ale gdy powiększysz / pomniejszysz przeglądarkę, zobaczysz ponownie ten sam problem. Rozwiązaniem jest użycie window.devicePixelRatio I skalowanie przestrzeni rysunkowej canvas.
źródło: JSFiddle
używając proporcji pikseli, możemy zwiększyć przestrzeń rysunkową dla płótna. Ale zwiększenie przestrzeni rysunkowej nie wystarczy, musimy również powiedzieć kanwie, że przyszłe operacje rysowania muszą być skalowane do proporcji pikseli. To rozwiąże wszystkie problemy ze skalowaniem.,
możesz powiedzieć, które z nich to canvas, A które to SVG?
wnioski
Jak widać, istnieje wiele powodów, dla których D3 jest dość przestarzały w wielu powszechnych przypadkach użycia. Sieć znacznie się rozwinęła od czasu jej wydania., Jeśli robisz proste wykresy, takie jak pączki, wykresy słupkowe, wykresy liniowe, wykresy punktowe itp., zastanów się, czy możesz je zaimplementować za pomocą istniejącego frameworka. Nie ma nic, co D3 zapewni Ci w tych przypadkach użycia. Jeśli chodzi o konserwację, Twój kod będzie prawdopodobnie łatwiejszy do utrzymania niż trudniejszy do utrzymania, a jeśli musisz wprowadzić jakiekolwiek zmiany, wprowadzenie tych zmian powinno być trywialne.
nie ma powodu, aby menedżerowie produktów czuli się zaniepokojeni brakiem korzystania z D3, i Ty też nie powinieneś się martwić.
dzięki za przeczytanie!,
aktualizacje
- artykuł zaktualizowany, aby dodać „ale Canvas nie skaluje się jak SVG?”sekcja.