Wpis z mikrobloga

Chcę napisać apkę (webową), która będzie zaznaczała na mapie miejscowości w zależności od pewnych kryteriów.

Zrobiłem prototyp w d3.js ale dosyć częstym use-casem w tej apce będzie sytuacja gdzie zaznaczonych miejscowości jest 5000 albo i więcej. Przy takiej ilości SVG dodawanych w DOMie performance w moim prototypie jest tragiczny, czasem przeglądarka #!$%@? podczas renderowania, a mam dosyć mocnego kompa. Więc myślę nad innymi opcjami:

1) zamiast D3.js i SVG użyć na froncie czegoś innego do zaznaczania miejscowości
2) używać D3.js (albo i nie) i dorobić jakąś sprytną logikę która ograniczy ilość rysowanych punktów, np. poprzez połączenie dwóch miejscowości w jedną, jeśli są blisko siebie a użytkownik ma mały ekran (ale nie rozwiązuje to problemu kiedy punktów jest dużo a nie da się sprytnie ich pomergować, np. jak ktoś ma duży monitor)
3) renderować na back endzie i po prostu zwracać użytkownikowi obrazek
4) coś jeszcze innego?

Wolałbym to robić na froncie, bo chciałbym mieć fajnie obsłużoną zmianę kolorów tych punktów, dynamiczne dodawanie kolejnych kryteriów, itp. Z drugiej strony nie wiem czy rysowanie kilku tysięcy punktów na mapie w przeglądarce jest wykonalne (nie znam się na FE, jestem typowym backendem).

#pytanie #programowanie #naukaprogramowania #javascript
  • 3
@RozkalibrowanaTurbopompa:
IMHO ilość nie powinna być problemem. Jak tylko wstawiasz punkty to nie potrzeba ci dodatkowej biblioteki. Alternatywnie zamiast SVG możesz używać canvasy.
d3 używałem tylko raz, ale czy ta biblioteka nie działa podobnie jak jQuery tzn. każdy element DOM, na którym pracujesz przekształca w obiekt d3? Może dlatego zaczyna ci brakować pamięci. Zresztą otwórz w chrome taba Performance monitor i Memory i popatrz i może coś ci się wyjaśni.