D3.js: Hiểu các lựa chọn và so sánh với Vanilla JavaScript
Bài viết này nhằm mục đích chỉ ra cách các lựa chọn hoạt động trong D3. Ta sẽ bắt đầu với một dự án cơ bản bao gồm d3.js dưới dạng tập lệnh không có hệ thống xây dựng:
<!DOCTYPE html> <html lang="en"> <head> <title>D3: Selections</title> </head> <body> <div class="about-me"> <p>Hi! My name is Paul and here's some facts about me.</p> <ul id="list"> <li>I'm a powerlifter</li> <li>I'm studying MSc Data Science</li> <li>I love D3.js!</li> </ul> </div> <script src="https://d3js.org/d3.v5.min.js"></script> <script src="main.js"></script> </body> </html> Xem xét cách ta có thể lựa chọn và sửa đổi các phần tử DOM mà không có D3:
const listItems = [...document.getElementsByTagName('li')]; listItems.map(item => item.style.setProperty('font-weight', 'bold')); 
Mặc dù hiện tại điều này không quá phức tạp, nhưng ta có thể mong đợi rằng mọi thứ sẽ ngày càng khó hơn và khó lý giải hơn khi ta mở rộng quy mô. Đây là lý do tại sao ta cần xem xét D3.
Các lựa chọn trong D3
Lưu ý khi ta muốn thao tác nhiều phần tử trong DOM, ta phải ánh xạ chúng như thế nào. Các lựa chọn D3 cho phép ta truy vấn một hoặc nhiều phần tử trên trang và cho phép ta thao tác toàn bộ lựa chọn mà không cần phải lặp lại từ phía ta .
Nó sử dụng cú pháp bộ chọn CSS tiêu chuẩn, vì vậy bạn có thể mong đợi truy vấn một phần tử theo tên của nó, một lớp với .about-me , một id với #list , v.v.
Ta có thể chọn các phần tử từ DOM bằng:
-
select()lấy một phần tử từ DOM. Nếu có nhiều kết quả trùng khớp, thì chỉ người đầu tiên được lấy. -
selectAll()lấy tất cả các phần tử từ DOM.
Thí dụ
Hãy xem điều này với một ví dụ mã. Làm tương tự như ví dụ JavaScript vani của ta có thể được thực hiện trong một dòng:
const li = d3.selectAll('li').style('font-weight', 'bold'); Như bạn thấy , nó trả về một tập hợp các phần tử mà ta có thể xâu chuỗi vào các phương thức khác như style .
Nếu ta thay đổi điều này thành select thay vì selectAll , bạn sẽ nhận thấy rằng I'm a powerlifter là li duy nhất được in đậm - điều này được mong đợi vì đây là li đầu tiên trong DOM.
Thêm một mục danh sách mới
Để thể hiện thêm sức mạnh của các lựa chọn, hãy xem xét cách ta có thể cần thêm một li mới vào DOM bằng JavaScript:
const ul = document.getElementsByTagName('ul')[0]; const newItem = document.createElement('li'); newItem.appendChild(document.createTextNode(`I'm learning about selections.`)); ul.appendChild(newItem); 
, đây không chính xác là quy trình làm việc tốt nhất khi ta đang tìm cách tạo trực quan hóa dữ liệu phức tạp. Hãy xem cùng một ví dụ với D3:
const ul = d3.select('ul'); ul.append('li').text(`I'm learning about selections`); Dễ dàng hơn nhiều! Mỗi hàm trả về giá trị cập nhật của thay đổi hoặc truy vấn trước đó, cho phép ta liên kết các phương thức với nhau một cách mạnh mẽ.
Lựa chọn phụ
Ta cũng có thể chọn các mục trong lựa chọn của ta . Hãy xem xét điều này bằng cách chọn li đầu tiên từ trong lựa chọn ul của ta và làm cho nó màu đỏ:
const ul = d3.select('ul'); ul.select('li').style('color', 'red'); ul.append('li').text(`I'm learning about selections`); Như bạn thấy , ta không chỉ giới hạn ở lựa chọn ban đầu. Ta có thể tiếp tục thực hiện các lựa chọn phụ và tìm hiểu cụ thể hơn về việc triển khai của ta .
Lựa chọn trông như thế nào?
Hãy sử dụng console.log để kiểm tra truy vấn đã select của ta để xem những gì được trả về:
{ _groups: [Array(1)] _parents: [html] } Nếu ta mở rộng _groups , bạn sẽ thấy rằng nó trả về ul của ta theo lựa chọn. Nếu ta đã thay đổi lựa chọn của bạn thành selectAll('li') , _groups trả về một Array chứa tập hợp các li bên trong NodeList(3) .
const li = d3.selectAll('li'); console.log(li); _groups: Array(1) 0: NodeList(3) 0: li 1: li 2: li _parents: [html] Đương nhiên, đối tượng _parents chứa cha mẹ cho lựa chọn này, là đối tượng html root .
Và đó là nó cho bây giờ! Hãy theo dõi để biết thêm về cách sử dụng D3.js.
Các tin liên quan
Xem xét Phạm vi, Ngữ cảnh, Tham chiếu Đối tượng và Thuyết minh trong JavaScript2019-02-25
Sử dụng JavaScript Mixins
2019-02-12
Đọc mã nguồn JavaScript, sử dụng AST
2019-02-09
JavaScript Biểu thức chính quy cho Người bình thường
2019-02-07
Mẫu kế thừa nguyên mẫu JavaScript
2019-02-01
Các mẫu hướng đối tượng JavaScript: Mẫu nhà máy
2019-01-23
Đối tượng, Nguyên mẫu và Lớp trong JavaScript
2019-01-10
Thủ thuật với JavaScript Hủy cấu trúc
2018-11-26
Đừng sợ theo dõi JavaScript
2018-10-17
Làm phẳng mảng trong Vanilla JavaScript với flat () và flatMap ()
2018-09-28
