D3.js - Kết hợp dữ liệu
Kết nối dữ liệu là một khái niệm quan trọng khác trong D3.js. Nó hoạt động cùng với các lựa chọn và cho phép chúng tôi thao tác tài liệu HTML đối với tập dữ liệu của chúng tôi (một loạt các giá trị số). Theo mặc định, D3.js đặt mức ưu tiên cao nhất trong các phương thức của nó và mỗi mục trong tập dữ liệu tương ứng với một phần tử HTML. Chương này giải thích chi tiết các phép nối dữ liệu.
Tham gia dữ liệu là gì?
Nối dữ liệu cho phép chúng tôi chèn, sửa đổi và loại bỏ các phần tử (phần tử HTML cũng như các phần tử SVG được nhúng) dựa trên tập dữ liệu trong tài liệu HTML hiện có. Theo mặc định, mỗi mục dữ liệu trong tập dữ liệu tương ứng với một phần tử (đồ họa) trong tài liệu.
Khi tập dữ liệu thay đổi, phần tử tương ứng cũng có thể được thao tác dễ dàng. Nối dữ liệu tạo ra mối quan hệ chặt chẽ giữa dữ liệu của chúng ta và các yếu tố đồ họa của tài liệu. Kết nối dữ liệu làm cho việc thao tác các phần tử dựa trên tập dữ liệu trở thành một quá trình rất đơn giản và dễ dàng.
Cách kết hợp dữ liệu hoạt động?
Mục đích chính của phép nối Dữ liệu là ánh xạ các phần tử của tài liệu hiện có với tập dữ liệu đã cho. Nó tạo ra một biểu diễn ảo của tài liệu đối với tập dữ liệu đã cho và cung cấp các phương pháp để làm việc với biểu diễn ảo. Chúng ta hãy xem xét một tập dữ liệu đơn giản như hình dưới đây.
[10, 20, 30, 25, 15]Tập dữ liệu có năm mục và do đó, nó có thể được ánh xạ tới năm phần tử của tài liệu. Hãy để chúng tôi ánh xạ nó đếnli phần tử của tài liệu sau sử dụng phương thức selectAll () của bộ chọn và phương thức data () của kết nối dữ liệu.
HTML
<ul id = "list">
<li><li>
<li></li>
</ul>Mã D3.js
d3.select("#list").selectAll("li").data([10, 20, 30, 25, 15]);Bây giờ, có năm yếu tố ảo trong tài liệu. Hai yếu tố ảo đầu tiên là haili phần tử được xác định trong tài liệu như hình dưới đây.
1. li - 10
2. li - 20Chúng ta có thể sử dụng tất cả các phương pháp sửa đổi phần tử của bộ chọn như attr(), style(), text(), v.v., cho hai phần đầu tiên li như hình bên dưới.
d3.select("#list").selectAll("li")
.data([10, 20, 30, 25, 15])
.text(function(d) { return d; });Hàm trong phương thức text () được sử dụng để lấy lidữ liệu được ánh xạ phần tử. Đây,d đại diện cho 10 đầu tiên li phần tử và 20 cho giây li thành phần.
Ba phần tử tiếp theo có thể được ánh xạ tới bất kỳ phần tử nào và nó có thể được thực hiện bằng cách sử dụng phương thức enter () và append () của phép nối dữ liệu. Phương thức enter () cấp quyền truy cập vào dữ liệu còn lại (không được ánh xạ tới các phần tử hiện có) và phương thức append () được sử dụng để tạo phần tử mới từ dữ liệu tương ứng. Hãy để chúng tôi tạo ralicho các mục dữ liệu còn lại. Bản đồ dữ liệu như sau:
3. li - 30
4. li - 25
5. li - 15Mã để tạo một phần tử li mới như sau:
d3.select("#list").selectAll("li")
.data([10, 20, 30, 25, 15])
.text(function(d) { return "This is pre-existing element and the value is " + d; })
.enter()
.append("li")
.text(function(d)
{ return "This is dynamically created element and the value is " + d; });Kết nối dữ liệu cung cấp một phương thức khác được gọi là exit() method để xử lý động các mục dữ liệu đã bị xóa khỏi tập dữ liệu như hình dưới đây.
d3.selectAll("li")
.data([10, 20, 30, 15])
.exit()
.remove()Ở đây, chúng tôi đã xóa mục thứ tư khỏi tập dữ liệu và li tương ứng của nó bằng cách sử dụng phương thức exit () và remove ().
Mã hoàn chỉnh như sau:
<!DOCTYPE html>
<html>
<head>
<script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
<style>
body { font-family: Arial; }
</style>
</head>
<body>
<ul id = "list">
<li></li>
<li></li>
</ul>
<input type = "button" name = "remove" value = "Remove fourth value"
onclick = "javascript:remove()" />
<script>
d3.select("#list").selectAll("li")
.data([10, 20, 30, 25, 15])
.text(function(d)
{ return "This is pre-existing element and the value is " + d; })
.enter()
.append("li")
.text(function(d)
{ return "This is dynamically created element and the value is " + d; });
function remove() {
d3.selectAll("li")
.data([10, 20, 30, 15])
.exit()
.remove()
}
</script>
</body>
</html>Kết quả của đoạn mã trên sẽ như sau: