DC.js - Khái niệm

DC.js đơn giản và dễ dàng đối với hầu hết các nhà phát triển front-end. Nó cho phép xây dựng các biểu đồ cơ bản một cách nhanh chóng, ngay cả khi không có bất kỳ kiến ​​thức nào về D3.js. Trước đây, chúng tôi bắt đầu sử dụng DC.js để tạo trực quan; chúng ta cần làm quen với các tiêu chuẩn web. Các tiêu chuẩn web sau đây được sử dụng nhiều trong D3.js, là nền tảng của DC.js để kết xuất biểu đồ.

  • Ngôn ngữ đánh dấu siêu văn bản (HTML)
  • Mô hình đối tượng tài liệu (DOM)
  • Trang tính kiểu xếp tầng (CSS)

Hãy để chúng tôi hiểu chi tiết từng tiêu chuẩn web này.

Ngôn ngữ đánh dấu siêu văn bản (HTML)

Như chúng ta đã biết, HTML được sử dụng để cấu trúc nội dung của trang web. Nó được lưu trữ trong một tệp văn bản có phần mở rộng là “.html”.

Một ví dụ HTML cơ bản điển hình trông giống như hình dưới đây:

<!DOCTYPE html>
<html lang = "en">
   <head>
      <meta charset = "UTF-8">
      <title></title>
   </head>
   
   <body>

   </body>
</html>

Mô hình đối tượng tài liệu (DOM)

Khi một trang HTML được tải bởi một trình duyệt, nó sẽ được chuyển đổi thành cấu trúc phân cấp. Mọi thẻ trong HTML đều được chuyển đổi thành một phần tử / đối tượng trong DOM với phân cấp cha-con. Nó làm cho HTML của chúng ta có cấu trúc logic hơn. Khi DOM được hình thành, việc thao tác (thêm / sửa đổi / xóa) các phần tử trên trang trở nên dễ dàng hơn.

Hãy cho chúng tôi hiểu DOM bằng cách sử dụng tài liệu HTML sau:

<!DOCTYPE html>
<html lang = "en">
   <head>
      <title>My Document</title>
   </head>

   <body>
      <div>
         <h1>Greeting</h1>
         <p>Hello World!</p>
      </div>
   </body>
</html>

Mô hình đối tượng tài liệu của tài liệu HTML ở trên như sau:

Trang tính kiểu xếp tầng (CSS)

Mặc dù HTML cung cấp cấu trúc cho trang web, các kiểu CSS làm cho trang web dễ nhìn hơn. CSS là một ngôn ngữ biểu định kiểu được sử dụng để mô tả bản trình bày của một tài liệu được viết bằng HTML hoặc XML (bao gồm các phương ngữ XML như SVG hoặc XHTML). CSS mô tả cách hiển thị các phần tử trên trang web.

JavaScript

JavaScript là một ngôn ngữ kịch bản phía máy khách được đánh máy lỏng lẻo, thực thi trong trình duyệt của người dùng. JavaScript tương tác với các phần tử html (phần tử DOM) để làm cho giao diện người dùng web tương tác. JavaScript triển khai các tiêu chuẩn ECMAScript, bao gồm các tính năng cốt lõi dựa trên đặc điểm kỹ thuật ECMA-262 cũng như các tính năng khác không dựa trên tiêu chuẩn ECMAScript. Kiến thức JavaScript là điều kiện tiên quyết cho DC.js.

Các thành phần

DC.js dựa trên hai thư viện JavaScript tuyệt vời, đó là:

  • Crossfilter
  • D3.js

Crossfilter

Crossfilter là một thư viện JavaScript để khám phá các tập dữ liệu đa biến lớn trong trình duyệt. Nó được sử dụng để Nhóm, Lọc và Tổng hợp hàng chục hoặc hàng trăm nghìn hàng dữ liệu thô rất nhanh chóng.

D3.js

D3.js là viết tắt của Data-Driven Documents. D3.js là một thư viện JavaScript để xử lý các tài liệu dựa trên dữ liệu. D3 là Khung hình ảnh hóa dữ liệu động, tương tác, trực tuyến và được sử dụng trong một số lượng lớn các trang web. D3.js được viết bởiMike Bostock, được tạo ra như một sự kế thừa cho bộ công cụ trực quan hóa trước đó có tên là Protovis. D3.js được sử dụng trên hàng trăm nghìn trang web.