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).