Bạn có thể bao gồm phiên bản mới nhất của D3.js trong tệp HTML của bạn bằng cách sử dụng liên kết Mạng phân phối nội dung (CDN), như sau đây:
<script src="https://d3js.org/d3.v6.min.js"></script>
Liên kết này trỏ đến phiên bản mới nhất (v6) của D3.js, được lưu trữ trên trang web chính thức của D3.js. Bằng cách sử dụng CDN, bạn có thể dễ dàng thêm D3.js vào dự án của bạn mà không cần phải tải xuống và lưu trữ thư viện một cách tự mình.
Bắt đầu với d3.js
Chúng ta 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 ta từ Mạng phân phối nội dung (CDN).
Các phiên bản của d3.js cdn (D3 CDNs)
| Mô tả | Thư viện trực quan hóa JavaScript cho HTML và SVG. |
|---|---|
| Trang web | http://d3js.org |
| URL Nguồn | https://github.com/d3/d3 |
| Phiên bản | 5.16.0 See all versions |
| Phiên bản ổn định mới nhất | 5.16.0 (hiện tại) |
| Phiên bản mới nhất | 5.16.0 |
| Mạng phân phối nội dung | cdnjs |
| unpkg |
bao gồm d3
<script src="https://d3js.org/d3.v5.min.js"></script>
đoạn mã d3
<script src="https://d3js.org/d3.v6.min.js"></script>
Tôi sẽ nghiên cứu cách thiết lập môi trường phát triển của D3.js. Tôi cần một số thành phần trước khi bắt đầu.
- Thư viện D3.js
- Trình soạn thảo
- Trình duyệt web và,
- Máy chủ web
Chào mừng bạn đến với Pakainfo!
Ví dụ 1: index.html
Tạo một tệp .html chứa đoạn mã sau:
<!DOCTYPE html>
<meta charset="utf-8">
<body>
<script src="//d3js.org/d3.v4.min.js"></script>
<script>
d3.select("body").append("span")
.text("Welcome, To Pakainfo!");
</script>
Cài đặt
Có nhiều cách để tải xuống và sử dụng D3.
Bước 2: Tải xuống và giải nén
sử dụng trang web https://d3js.org/
d3.zip
sử dụng NPM
npm init
//and then
//NPM install D3:
npm install --save d3
//Added code
<script type="text/javascript" src="node_modules/d3/build/d3.js"></script>
sử dụng CDN
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.1.1/d3.js"></script>
Các liên kết CDN
| Tên tệp | CDN | URL |
|---|---|---|
| dist/d3.min.js | unpkg | https://unpkg.com/d3@5.16.0/dist/d3.min.js |
| d3.js | cdnjs | https://cdnjs.cloudflare.com/ajax/libs/d3/5.16.0/d3.js |
| d3.min.js | cdnjs | https://cdnjs.cloudflare.com/ajax/libs/d3/5.16.0/d3.min.js |
sử dụng GITHUB
<script type="text/javascript" src="https://raw.githubusercontent.com/d3/d3/v3.5.16/d3.js"></script>
Lưu ý: Phiên bản cụ thể của D3.js mà bạn sử dụng có thể thay đổi tùy theo yêu cầu của dự án của bạn. Bạn có thể tìm các phiên bản cũ hơn của D3.js trên trang web chính thức hoặc bằng cách sử dụng liên kết CDN khác.
Hy vọng bạn đã có ý tưởng về hướng dẫn d3.js.
- Bài đăng trên blog này ban đầu được xuất bản tại: https://www.pakainfo.com
