Sự khác biệt giữa forEach và each trong D3js?
Sự khác biệt giữa forEach và each trong D3js?
Đầu tiên, .forEach() không phải là một phần của d3, nó là một hàm gốc của các mảng javascript. Vì thế,
["a", "b", "c"].forEach(function(d, i) { console.log(d + " " + i); });
// Outputs:
a 0
b 1
c 2
Và điều đó hoạt động ngay cả khi d3 không được tải trên trang.
Tiếp theo, d3's .each() hoạt động trên các lựa chọn d3 (những gì bạn nhận được khi bạn d3.selectAll(...)). Về mặt kỹ thuật, bạn có thể gọi .forEach() trên một lựa chọn d3, kể từ sau hậu trường, lựa chọn d3 là một mảng với các hàm phụ (một trong số đó là .each()). Nhưng bạn không nên làm điều đó vì:
Làm như vậy sẽ không tạo ra hành vi mong muốn. Biết cách sử dụng .forEach() với lựa chọn d3 để tạo ra bất kỳ hành vi mong muốn nào sẽ yêu cầu sự hiểu biết thân mật về các hoạt động bên trong của d3. Vì vậy, tại sao làm điều đó, nếu bạn chỉ có thể sử dụng tài liệu, một phần công cộng của API.
Khi bạn gọi .each(function(d, i) { }) trên một lựa chọn d3, bạn sẽ có nhiều hơn là chỉ d và i: hàm được gọi như vậy mà this từ khóa ở bất kỳ vị trí nào bên trong hàm đó trỏ đến phần tử HTML DOM được liên kết với d. Nói cách khác console.log(this) từ bên trong function(d,i) {} sẽ đăng nhập một cái gì đó như <div class="foo"></div> hoặc bất kỳ phần tử html nào. Và điều đó rất hữu ích, bởi vì sau đó bạn có thể gọi hàm này this để thay đổi thuộc tính, nội dung hoặc bất kỳ thứ gì của CSS. Thông thường, bạn sử dụng d3 để đặt các thuộc tính này, như trong d3.select(this).style('color', '#c33');.
Điều quan trọng nhất là, sử dụng .each() bạn có quyền truy cập vào 3 thứ bạn cần: d, this và i. Với .forEach(), trên một mảng (như trong ví dụ từ đầu) bạn chỉ nhận được 2 thứ (d và i) và bạn phải thực hiện một loạt công việc để kết hợp một phần tử HTML với 2 thứ đó. Và, trong số những thứ khác, là làm thế nào d3 là hữu ích.