Tại sao d3.select() trả về mảng mảng?

Question

Gần đây tôi đã bắt đầu sử dụng d3.js để viết một số tập lệnh để thao tác SVG. Vì vậy, hầu hết thời gian tôi tham khảo tài liệu d3 và tìm giải pháp. Tuy nhiên tôi không thể hiểu tại sao d3.select mảng trả về hàm của mảng. Ví dụ, giả sử tôi có một phần tử SVG và nếu tôi làm d3.select("svg"), nó trả về [[svg]] vì vậy tôi phải làm d3.select("svg")[0]. Tài liệu hướng dẫn cho biết

Một sắc thái là các lựa chọn được nhóm: thay vì mảng một chiều, mỗi lựa chọn là một mảng các phần tử. Điều này giữ nguyên cấu trúc phân cấp của các lựa chọn phụ

Sau đó, chúng tôi có thể bỏ qua phần lớn thời gian.

1. Tại sao nó trả về mảng mảng?
2. không

này giữ gìn cấu trúc thứ bậc của subselections

nghĩa là gì?

Xin cảm ơn trước.

Answer 1

Bạn không cần phải biết hoặc quan tâm cách đối tượng trả tiền d3.select được cấu trúc nội bộ. Tất cả những gì bạn cần biết là phương thức nào có thể truy cập được trong đối tượng đó, đó là những gì tài liệu mô tả.

Giả sử bạn có tài liệu này:

<div> 
    <span>1</span> 
    <span>2</span> 
</div> 
<div> 
    <span>3</span> 
    <span>4</span> 
</div> 

Nếu bạn chọn tất cả <div> yếu tố với d3.selectAll

var div = d3.selectAll("div"); 

các div là một đối tượng lựa chọn d3 kích thước 2, một cho mỗi <div> phần tử trong tài liệu.

Nhưng nếu bây giờ bạn tạo ra một subselection từ đối tượng lựa chọn này

var span = div.selectAll("span"); 

tìm kiếm được thực hiện cho phù hợp với các yếu tố bên trong mỗi yếu tố trong việc lựa chọn div, và cấu trúc được bảo tồn - tức là, việc lựa chọn span sẽ chứa cùng một số phần tử như lựa chọn div dựa trên, và mỗi phần tử này sẽ bao gồm một phần tử lựa chọn được tìm thấy trong phần tử đó. Vì vậy, trong trường hợp này, span sẽ chứa hai lựa chọn (đầu tiên <div> và thứ hai <div>), mỗi phần tử sẽ chứa hai phần tử (1 và 2 ở đầu tiên, 3 và 4 trong phần thứ hai).

Đối với select, nó giống như selectAll ngoại trừ nó dừng sau khi tìm một kết quả phù hợp; sự trở lại của nó được cấu trúc chính xác theo cùng một cách, tuy nhiên.

Demo