D3.js - Hoạt ảnh

D3.js hỗ trợ hoạt ảnh thông qua quá trình chuyển đổi. Chúng ta có thể tạo hoạt ảnh với việc sử dụng chuyển tiếp thích hợp. Chuyển đổi là một dạng giới hạn củaKey Frame Animationchỉ với hai khung chính - bắt đầu và kết thúc. Khung khóa bắt đầu thường là trạng thái hiện tại của DOM và khung khóa kết thúc là một tập hợp các thuộc tính, kiểu và các thuộc tính khác mà bạn chỉ định. Quá trình chuyển đổi rất thích hợp để chuyển đổi sang chế độ xem mới mà không cần mã phức tạp phụ thuộc vào chế độ xem bắt đầu.

Example - Hãy để chúng tôi xem xét đoạn mã sau trong trang “transfer_color.html”.

<!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").style("background-color", "lightblue") 
         // make the background-color lightblue.transition()
         .style("background-color", "gray");
         // make the background-color gray
      </script>
   </body>
</html>

Ở đây, màu nền của tài liệu đã thay đổi từ trắng sang xám nhạt và sau đó là xám.

Phương thức thời lượng ()

Phương thức thời lượng () cho phép các thay đổi thuộc tính diễn ra suôn sẻ trong một khoảng thời gian cụ thể hơn là ngay lập tức. Hãy để chúng tôi thực hiện quá trình chuyển đổi mất 5 giây bằng cách sử dụng 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.selectAll("h3").transition().style("color","green").duration(5000);
      </script>
   </body>
</html>

Ở đây, quá trình chuyển đổi diễn ra suôn sẻ và đồng đều. Chúng tôi cũng có thể chỉ định giá trị mã màu RGB trực tiếp bằng cách sử dụng phương pháp sau.

d3.selectAll("h3").transition().style("color","rgb(0,150,120)").duration(5000);

Giờ đây, mỗi số màu chậm rãi, mượt mà và đồng đều đi từ 0 đến 150. Để có được sự kết hợp chính xác giữa các khung hình từ giá trị khung hình bắt đầu đến giá trị khung hình cuối cùng, D3.js sử dụng phương pháp nội suy. Cú pháp được đưa ra dưới đây:

d3.interpolate(a, b)

D3 cũng hỗ trợ các kiểu nội suy sau:

interpolateNumber - hỗ trợ các giá trị số.
interpolateRgb - hỗ trợ màu sắc.
interpolateString - chuỗi hỗ trợ.

D3.js quan tâm đến việc sử dụng phương pháp nội suy thích hợp và trong các trường hợp nâng cao, chúng ta có thể sử dụng phương pháp nội suy trực tiếp để có được kết quả mong muốn. Chúng tôi thậm chí có thể tạo một phương pháp nội suy mới, nếu cần.

Phương thức delay ()

Phương thức delay () cho phép quá trình chuyển đổi diễn ra sau một khoảng thời gian nhất định. Hãy xem xét đoạn mã sau trong “transfer_delay.html”.

<!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.selectAll("h3").transition()
            .style("font-size","28px").delay(2000).duration(2000);
      </script>
   </body>
</html>

Vòng đời của quá trình chuyển đổi

Quá trình chuyển đổi có vòng đời bốn giai đoạn -

Quá trình chuyển đổi đã được lên lịch.
Quá trình chuyển đổi bắt đầu.
Quá trình chuyển đổi chạy.
Quá trình chuyển đổi kết thúc.

Hãy để chúng tôi đi qua từng cái một chi tiết.

Quá trình chuyển đổi đã được lên lịch

Quá trình chuyển đổi được lên lịch khi nó được tạo. Khi chúng tôi gọiselection.transition, chúng tôi đang lên lịch chuyển đổi. Đây cũng là lúc chúng tôi gọiattr(), style() và các phương pháp chuyển tiếp khác để xác định khung khóa kết thúc.

Quá trình chuyển đổi bắt đầu

Quá trình chuyển đổi bắt đầu dựa trên độ trễ của nó, được chỉ định khi quá trình chuyển đổi được lên lịch. Nếu không có độ trễ nào được chỉ định, thì quá trình chuyển đổi sẽ bắt đầu sớm nhất có thể, thường là sau vài mili giây.

Nếu quá trình chuyển đổi có độ trễ, thì giá trị bắt đầu chỉ nên được đặt khi quá trình chuyển đổi bắt đầu. Chúng ta có thể làm điều này bằng cách lắng nghe sự kiện bắt đầu -

d3.select("body")
   .transition()
   .delay(200)
   .each("start", function() { d3.select(this).style("color", "green"); })
   .style("color", "red");

Quá trình chuyển đổi chạy

Khi quá trình chuyển đổi chạy, nó liên tục được gọi với các giá trị của quá trình chuyển đổi khác nhau, từ 0 đến 1. Ngoài độ trễ và thời lượng, quá trình chuyển đổi có khả năng kiểm soát thời gian dễ dàng hơn. Giảm bớt thời gian làm sai lệch thời gian, chẳng hạn như làm chậm và ra chậm. Một số hàm nới lỏng có thể tạm thời cho giá trị t lớn hơn 1 hoặc nhỏ hơn 0.

Quá trình chuyển đổi kết thúc

Thời gian kết thúc chuyển đổi luôn chính xác bằng 1, do đó giá trị kết thúc được đặt chính xác khi quá trình chuyển đổi kết thúc. Quá trình chuyển đổi kết thúc dựa trên tổng độ trễ và thời lượng của nó. Khi quá trình chuyển đổi kết thúc, sự kiện kết thúc sẽ được gửi đi.