D3.js - Cài đặt

Trong chương này, chúng ta sẽ học cách thiết lập môi trường phát triển D3.js. Trước khi bắt đầu, chúng ta cần các thành phần sau:

Thư viện D3.js
Editor
trình duyệt web
máy chủ web

Hãy để chúng tôi đi qua các bước một cách chi tiết.

Thư viện D3.js

Chúng tôi cần đưa thư viện D3.js vào trang web HTML của bạn để sử dụng D3.js để tạo trực quan hóa dữ liệu. Chúng ta có thể thực hiện theo hai cách sau:

Bao gồm thư viện D3.js từ thư mục dự án của bạn.
Bao gồm thư viện D3.js từ CDN (Mạng phân phối nội dung).

Tải xuống Thư viện D3.js

D3.js là một thư viện mã nguồn mở và mã nguồn của thư viện được cung cấp miễn phí trên web tại https://d3js.org/trang mạng. Truy cập trang web D3.js và tải xuống phiên bản mới nhất của D3.js (d3.zip). Hiện tại, phiên bản mới nhất là 4.6.0.

Sau khi quá trình tải xuống hoàn tất, hãy giải nén tệp và tìm kiếm d3.min.js. Đây là phiên bản rút gọn của mã nguồn D3.js. Sao chép tệp d3.min.js và dán vào thư mục gốc của dự án của bạn hoặc bất kỳ thư mục nào khác, nơi bạn muốn giữ tất cả các tệp thư viện. Bao gồm tệp d3.min.js trong trang HTML của bạn như được hiển thị bên dưới.

Example - Chúng ta hãy xem xét ví dụ sau.

<!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 là một mã JavaScript, vì vậy chúng ta nên viết tất cả mã D3 của mình trong thẻ “script”. Chúng tôi có thể cần phải thao tác các phần tử DOM hiện có, vì vậy chúng tôi khuyên bạn nên viết mã D3 ngay trước phần cuối của thẻ “body”.

Bao gồm Thư viện D3 từ CDN

Chúng tôi có thể sử dụng thư viện D3.js bằng cách liên kết trực tiếp nó vào trang HTML của chúng tôi từ Mạng Phân phối Nội dung (CDN). CDN là một mạng lưới các máy chủ nơi các tệp được lưu trữ và được phân phối đến người dùng dựa trên vị trí địa lý của họ. Nếu chúng ta sử dụng CDN, chúng ta không cần tải mã nguồn.

Bao gồm thư viện D3.js bằng URL CDN https://d3js.org/d3.v4.min.js vào trang của chúng tôi như được hiển thị bên dưới.

Example - Chúng ta hãy xem xét ví dụ sau.

<!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>

Trình chỉnh sửa D3.js

Chúng tôi sẽ cần một trình soạn thảo để bắt đầu viết mã của bạn. Có một số IDE tuyệt vời (Môi trường phát triển tích hợp) hỗ trợ JavaScript như:

Mã Visual Studio
WebStorm
Eclipse
Văn bản tuyệt vời

Các IDE này cung cấp khả năng hoàn thành mã thông minh cũng như hỗ trợ một số khung JavaScript hiện đại. Nếu bạn không có IDE ưa thích, bạn luôn có thể sử dụng một trình soạn thảo cơ bản như Notepad, VI, v.v.

Trình duyệt web

D3.js hoạt động trên tất cả các trình duyệt ngoại trừ IE8 trở xuống.

Máy chủ web

Hầu hết các trình duyệt phục vụ các tệp HTML cục bộ trực tiếp từ hệ thống tệp cục bộ. Tuy nhiên, có một số hạn chế nhất định khi tải các tệp dữ liệu bên ngoài. Trong các chương sau của hướng dẫn này, chúng tôi sẽ tải dữ liệu từ các tệp bên ngoài nhưCSV và JSON. Vì vậy, sẽ dễ dàng hơn cho chúng tôi, nếu chúng tôi thiết lập máy chủ web ngay từ đầu.

Bạn có thể sử dụng bất kỳ máy chủ web nào mà bạn cảm thấy thoải mái - ví dụ như IIS, Apache, v.v.

Xem trang của bạn

Trong hầu hết các trường hợp, chúng tôi chỉ có thể mở tệp HTML của bạn trong trình duyệt web để xem. Tuy nhiên, khi tải các nguồn dữ liệu bên ngoài, việc chạy một máy chủ web cục bộ và xem trang của bạn từ máy chủ sẽ đáng tin cậy hơn(http://localhost:8080).