Sự khác nhau giữa select() và selectAll() là gì?Sự khác nhau giữa select() và selectAll()
Tại sao thẻ thứ hai không thêm thẻ p?
divSelection = d3.select('#div-vis').selectAll('p').data(['dummy']).enter().append('p');
divSelection = d3.select('#div-vis').select('p').data(['dummy']).enter().append('p');
lựa chọn làm tổ có một tác dụng phụ tế nhị nhưng quan trọng: nó đặt node cha cho mỗi nhóm. Nút cha là một thuộc tính ẩn trên các lựa chọn xác định nơi để nối thêm các phần tử nhập vào. … Có một sự khác biệt quan trọng giữa select và selectAll: select giữ lại nhóm hiện có, trong khi selectAll tạo một nhóm mới. Việc lựa chọn cuộc gọi do đó giữ nguyên dữ liệu, chỉ mục và thậm chí cả nút cha của lựa chọn ban đầu!
Khi bạn nói d3.select("#vis"), nút chính của lựa chọn vẫn là phần tử tài liệu. Khi bạn nói selectAll("p"), bạn xác định nút cha là phần tử #vis được chọn trước đó, vì selectAll là toán tử lồng nhau. Điều đó chỉ xảy ra với selectAll và không chọn.
Trong tài liệu HTML này:
<html>
<body>
<div id="viz">
</div>
<body>
</html>
Áp dụng mã này:
var viz = d3.select('#viz').selectAll('p').data([0])
.enter().append('p');
Cung cấp kết quả này:
<html>
<body>
<div id="viz">
<p></p>
</div>
<body>
</html>
Điều này là do selectAll() định nghĩa một yếu tố phụ huynh dựa trên trước select phương pháp, là select('#viz'). Theo cách đó:
console.log(viz[0].parentNode) // <div id="viz">
Trong khi đó nếu thực thi mã sau trong tài liệu HTML đầu tiên:
var viz = d3.select('#viz').select('p').data([0])
.enter().append('p');
Nó mang đến cho bạn kết quả này:
<html>
<body>
<div id="viz">
</div>
<body>
<p></p> <!-- your p element is appended to <html> as its parent element
</html>
Từ một selectAll() phải xác định lại phần tử gốc của phần tử lựa chọn của bạn, phần tử mẹ của lựa chọn của bạn vẫn là <html> được đặt theo mặc định. Nếu chúng tôi ghi lại nút gốc của lựa chọn:
console.log(viz[0].parentNode) // <html>
Hãy nhớ rằng selections are arrays (groups) of arrays of elements. Viết viz[0] là nhóm phần tử đầu tiên, không phải là phần tử đầu tiên trong lựa chọn của bạn. Để có được những yếu tố đầu tiên bạn nên viết:
console.log(viz[0][0].parentNode)
Mà sẽ cung cấp cho bạn các yếu tố phụ huynh đó yếu tố cụ thể trong cây DOM, không phải trong nhóm lựa chọn d3 của bạn.