D3.js - instalacja

W tym rozdziale dowiemy się, jak skonfigurować środowisko programistyczne D3.js. Zanim zaczniemy, potrzebujemy następujących komponentów -

  • Biblioteka D3.js.
  • Editor
  • przeglądarka internetowa
  • serwer internetowy

Przejdźmy szczegółowo przez kolejne kroki.

Biblioteka D3.js

Musimy dołączyć bibliotekę D3.js do Twojej strony HTML, aby używać D3.js do tworzenia wizualizacji danych. Możemy to zrobić na dwa sposoby -

  • Uwzględnij bibliotekę D3.js z folderu projektu.
  • Dołącz bibliotekę D3.js z CDN (Content Delivery Network).

Pobierz bibliotekę D3.js

D3.js jest biblioteką typu open source, a jej kod źródłowy jest bezpłatnie dostępny w sieci WWW pod adresem https://d3js.org/stronie internetowej. Odwiedź witrynę D3.js i pobierz najnowszą wersję D3.js (d3.zip). Obecnie najnowsza wersja to 4.6.0.

Po zakończeniu pobierania rozpakuj plik i poszukaj d3.min.js. To jest zminimalizowana wersja kodu źródłowego D3.js. Skopiuj plik d3.min.js i wklej go do folderu głównego projektu lub dowolnego innego folderu, w którym chcesz zachować wszystkie pliki biblioteki. Dołącz plik d3.min.js do swojej strony HTML, jak pokazano poniżej.

Example - Rozważmy następujący przykład.

<!DOCTYPE html>
<html lang = "en">
   <head>
      <script src = "/path/to/d3.min.js"></script>
   </head>

   <body>
      <script>
         // write your d3 code here.. 
      </script>
   </body>
</html>

D3.js to kod JavaScript, więc powinniśmy pisać cały nasz kod D3 w tagu „script”. Być może będziemy musieli manipulować istniejącymi elementami DOM, dlatego zaleca się napisanie kodu D3 tuż przed końcem znacznika „body”.

Dołącz bibliotekę D3 z CDN

Możemy korzystać z biblioteki D3.js, łącząc ją bezpośrednio z naszą stroną HTML z sieci dostarczania treści (CDN). CDN to sieć serwerów, na których pliki są hostowane i dostarczane do użytkownika na podstawie jego położenia geograficznego. Jeśli korzystamy z CDN, nie musimy pobierać kodu źródłowego.

Dołącz bibliotekę D3.js, używając adresu URL CDN https://d3js.org/d3.v4.min.js na naszej stronie, jak pokazano poniżej.

Example - Rozważmy następujący przykład.

<!DOCTYPE html>
<html lang = "en">
   <head>
      <script src = "https://d3js.org/d3.v4.min.js"></script>
   </head>

   <body>
      <script>
         // write your d3 code here.. 
      </script>
   </body>
</html>

Edytor D3.js

Będziemy potrzebować edytora, aby rozpocząć pisanie kodu. Istnieje kilka świetnych IDE (zintegrowane środowisko programistyczne) z obsługą JavaScript, takie jak -

  • Visual Studio Code
  • WebStorm
  • Eclipse
  • Wysublimowany tekst

Te IDE zapewniają inteligentne uzupełnianie kodu, a także obsługują niektóre z nowoczesnych frameworków JavaScript. Jeśli nie masz wymyślnego IDE, zawsze możesz użyć podstawowego edytora, takiego jak Notatnik, VI itp.

Przeglądarka internetowa

D3.js działa na wszystkich przeglądarkach oprócz IE8 i starszych.

Serwer internetowy

Większość przeglądarek obsługuje lokalne pliki HTML bezpośrednio z lokalnego systemu plików. Istnieją jednak pewne ograniczenia, jeśli chodzi o ładowanie zewnętrznych plików danych. W ostatnich rozdziałach tego samouczka będziemy ładować dane z plików zewnętrznych, takich jakCSV i JSON. Dlatego będzie nam łatwiej, jeśli serwer WWW skonfigurujemy od samego początku.

Możesz użyć dowolnego serwera WWW, z którym czujesz się komfortowo - np. IIS, Apache itp.

Przeglądanie Twojej strony

W większości przypadków możemy po prostu otworzyć plik HTML w przeglądarce internetowej, aby go wyświetlić. Jednak podczas ładowania zewnętrznych źródeł danych bardziej niezawodne jest uruchomienie lokalnego serwera WWW i przeglądanie strony z serwera(http://localhost:8080).