D3.js - Chuyển tiếp
Quá trình chuyển đổi là quá trình thay đổi từ trạng thái này sang trạng thái khác của một mặt hàng. D3.js cung cấp mộttransition()để thực hiện chuyển đổi trong trang HTML. Hãy cùng chúng tôi tìm hiểu về quá trình chuyển đổi trong chương này.
Phương thức chuyển đổi ()
Phương thức chuyển đổi () có sẵn cho tất cả các bộ chọn và nó bắt đầu quá trình chuyển đổi. Phương thức này hỗ trợ hầu hết các phương thức lựa chọn như - attr (), style (), v.v. Nhưng, nó không hỗ trợ phương thức append () và data (), những phương thức này cần được gọi trước phương thức chuyển đổi (). Ngoài ra, nó cung cấp các phương thức cụ thể cho quá trình chuyển đổi như thời lượng (), dễ dàng (), v.v. Một chuyển đổi đơn giản có thể được định nghĩa như sau:
d3.select("body")
.transition()
.style("background-color", "lightblue");Một quá trình chuyển đổi có thể được tạo trực tiếp bằng phương thức d3.transition () và sau đó được sử dụng cùng với các bộ chọn như sau.
var t = d3.transition()
.duration(2000);
d3.select("body")
.transition(t)
.style("background-color", "lightblue");Một ví dụ tối thiểu
Bây giờ chúng ta hãy tạo một ví dụ cơ bản để hiểu cách chuyển đổi hoạt động.
Tạo một tệp HTML mới, transition_simple.html với đoạn mã sau.
<!DOCTYPE html>
<html>
<head>
<script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
</head>
<body>
<h3>Simple transitions</h3>
<script>
d3.select("body").transition().style("background-color", "lightblue");
</script>
</body>
</html>Ở đây, chúng tôi đã chọn bodyvà sau đó bắt đầu chuyển đổi bằng cách gọi phương thức chuyển đổi (). Sau đó, chúng tôi đã hướng dẫn chuyển màu nền từ màu hiện tại,white đến light blue.
Bây giờ, làm mới trình duyệt và trên màn hình, màu nền chuyển từ trắng sang xanh nhạt. Nếu chúng ta muốn thay đổi màu nền từ xanh lam nhạt sang xám, chúng ta có thể sử dụng chuyển đổi sau:
d3.select("body").transition().style("background-color", "gray");