DC.js - Giới thiệu về D3.js

D3.js là một thư viện JavaScript được sử dụng để tạo hình ảnh trực quan tương tác trong trình duyệt. Thư viện D3 cho phép chúng tôi thao tác các phần tử của trang web trong ngữ cảnh của tập dữ liệu. Các phần tử này có thể là phần tử HTML, SVG hoặc Canvas và có thể được giới thiệu, loại bỏ hoặc chỉnh sửa theo nội dung của tập dữ liệu. Nó là một thư viện để thao tác các đối tượng DOM. D3.js có thể là một trợ giúp có giá trị trong việc khám phá dữ liệu. Nó cho phép bạn kiểm soát việc trình bày dữ liệu của mình và cho phép bạn thêm tính tương tác của dữ liệu.

D3.js là một trong những framework hàng đầu khi so sánh với các thư viện khác. Đây là bởi vì; nó hoạt động trên web và trực quan hóa dữ liệu và ở cấp độ doanh nghiệp. Một lý do khác là tính linh hoạt tuyệt vời của nó, cho phép các nhà phát triển trên khắp thế giới tạo ra nhiều biểu đồ nâng cao. Ngoài ra, nó đã mở rộng chức năng của mình ở một mức độ lớn.

Hãy để chúng tôi hiểu các khái niệm cơ bản của D3.js, như sau:

Selections
Tham gia dữ liệu
SVG
Transition
Animation
API D3.js

Hãy để chúng tôi hiểu chi tiết từng khái niệm này.

Lựa chọn

Lựa chọn là một trong những khái niệm cốt lõi trong D3.js. Nó dựa trên khái niệm Bộ chọn CSS. Những người đã sử dụng và biết về JQuery có thể dễ dàng hiểu các lựa chọn. Nó cho phép chúng tôi chọn DOM dựa trên các bộ chọn CSS và sau đó cung cấp các tùy chọn để sửa đổi hoặc nối thêm và xóa các phần tử của DOM.

Tham gia dữ liệu

Kết nối dữ liệu là một khái niệm quan trọng khác trong D3.js. Nó hoạt động cùng với các lựa chọn và cho phép chúng tôi thao tác tài liệu HTML đối với tập dữ liệu của chúng tôi (một loạt các giá trị số). Theo mặc định, D3.js cung cấp cho tập dữ liệu mức ưu tiên cao nhất trong các phương thức của nó và mỗi mục trong tập dữ liệu tương ứng với một phần tử HTML.

SVG

SVG là viết tắt của Scalable Vector Graphics. SVG là một định dạng đồ họa vector dựa trên XML. Nó cung cấp các tùy chọn để vẽ các hình dạng khác nhau như Đường thẳng, Hình chữ nhật, Hình tròn, Hình elip, v.v. Do đó, thiết kế hình ảnh trực quan với SVG mang lại cho bạn nhiều sức mạnh và tính linh hoạt hơn.

Chuyển đổi

SVG cung cấp các tùy chọn để biến đổi một phần tử hình dạng SVG hoặc nhóm các phần tử SVG. Biến đổi SVG hỗ trợ Dịch, Quy mô, Xoay và Skew.

Chuyển tiếp

Quá trình chuyển đổi là quá trình thay đổi từ trạng thái này sang trạng thái khác của một mặt hàng. D3.js cung cấp phương thức chuyển đổi () để thực hiện chuyển đổi trong trang HTML.

Hoạt hình

D3.js hỗ trợ hoạt ảnh thông qua quá trình chuyển đổi. Hoạt ảnh có thể được thực hiện với việc sử dụng chuyển tiếp thích hợp. Chuyển tiếp là một dạng hoạt ảnh khung chính hạn chế chỉ có hai khung chính:start và end. Khung khóa bắt đầu thường là trạng thái hiện tại của DOM và khung khóa kết thúc là một tập hợp các thuộc tính, kiểu và các thuộc tính khác mà bạn chỉ định. Quá trình chuyển đổi rất thích hợp để chuyển đổi sang chế độ xem mới mà không cần mã phức tạp phụ thuộc vào chế độ xem bắt đầu.

API D3.js

Hãy cho chúng tôi hiểu tóm tắt một số phương thức quan trọng của API D3.js.

API bộ sưu tập

Tập hợp chỉ đơn giản là một đối tượng nhóm nhiều phần tử thành một đơn vị duy nhất. Nó còn được gọi là vật chứa. Nó chứa các Đối tượng, Bản đồ, Bộ và Tổ.

API đường dẫn

Đường dẫn được sử dụng để vẽ hình chữ nhật, hình tròn, hình elip, hình đa giác, đa giác, đường thẳng và đường cong. Đường dẫn SVG đại diện cho đường viền của một hình dạng có thể được vuốt, tô, được sử dụng làm đường cắt hoặc bất kỳ sự kết hợp nào của cả ba.

API trục

D3.js cung cấp các chức năng để vẽ các trục. Một trục được tạo bởi các đường thẳng, dấu tích và nhãn. Một trục sử dụng tỷ lệ, do đó mỗi trục sẽ cần được cung cấp một tỷ lệ để làm việc.

Thu phóng API

Phóng to giúp chia tỷ lệ nội dung của bạn. Bạn có thể tập trung vào một khu vực cụ thể bằng cách sử dụng phương pháp nhấp và kéo.

API giá trị phân tách bằng dấu phân cách

Dấu phân cách là một chuỗi gồm một hoặc nhiều ký tự được sử dụng để xác định ranh giới giữa các vùng riêng biệt, độc lập trong văn bản thuần túy hoặc dữ liệu khác. Dấu phân cách trường là một chuỗi các giá trị được phân tách bằng dấu phẩy. Nói tóm lại, các giá trị được phân tách bằng dấu phân cách là Giá trị được phân tách bằng dấu phẩy (CSV) hoặc Giá trị được phân cách bằng tab (TSV).