D3.js - Chuyển đổi SVG

SVG cung cấp các tùy chọn để biến đổi một phần tử hình dạng SVG hoặc nhóm các phần tử SVG. Hỗ trợ chuyển đổi SVGTranslate, Scale, Rotate và Skew. Chúng ta hãy tìm hiểu sự biến đổi trong chương này.

Giới thiệu về chuyển đổi SVG

SVG giới thiệu một thuộc tính mới, transformđể hỗ trợ chuyển đổi. Các giá trị có thể có là một hoặc nhiều giá trị sau,

Translate - Có hai lựa chọn, tx đề cập đến phép dịch dọc theo trục x và tyđề cập đến phép dịch dọc theo trục y. Đối vớiExample- dịch (30 30).
Rotate - Có ba lựa chọn, angle đề cập đến góc quay, cx và cyđề cập đến tâm của phép quay theo trục x và y. Nếucx và cykhông được chỉ định, thì nó mặc định là điểm gốc hiện tại của hệ tọa độ. Đối vớiExample - xoay (60).
Scale - Có hai lựa chọn, sx đề cập đến hệ số tỷ lệ dọc theo trục x và syđề cập đến hệ số tỷ lệ dọc theo trục y. Đây,sy là tùy chọn và nó có giá trị là sx, nếu nó không được chỉ định. Đối vớiExample - thang điểm (10).
Skew (SkewX and SkewY)- Nó có một lựa chọn duy nhất; cácskew-angleđề cập đến góc dọc theo trục x đối với SkewX và góc dọc theo trục y đối với SkewY. Đối vớiExample - xiên (20).

Ví dụ về hình chữ nhật SVG với phép tịnh tiến, được mô tả như sau:

<html>
   <head>
      <script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
   </head>

   <body>
      <svg width = "300" height = "300">
         <rect x = "20" 
            y = "20"
            width = "60"
            height = "60"
            fill = "green"
            transform = "translate(30 30)">
         </rect>
      </svg>
   </body>
</html>

Đoạn mã trên sẽ mang lại kết quả như sau.

Có thể chỉ định nhiều hơn một phép chuyển đổi cho một phần tử SVG duy nhất bằng cách sử dụng không gian làm phân tách. Nếu nhiều hơn một giá trị được chỉ định, phép biến đổi sẽ được áp dụng từng giá trị một theo thứ tự được chỉ định.

<html>
   <head>
      <script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
   </head>

   <body>
      <svg width = "300" height = "300">
         <rect x = "20" 
            y = "20" 
            width = "60" 
            height = "60" 
            fill = "green" 
            transform = "translate(60 60) rotate(45)">
         </rect>
      </svg>
   </body>
</html>

Đoạn mã trên sẽ mang lại kết quả như sau.

Chuyển đổi cũng có thể được áp dụng cho phần tử nhóm SVG. Điều này cho phép chuyển đổi đồ họa phức tạp được xác định trong SVG như được mô tả bên dưới.

<html>
   <head>
      <script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
   </head>

   <body>
      <svg width = "300" height = "300">
         <g transform = "translate(60,60) rotate(30)">
            <rect x = "20" 
               y = "20" 
               width = "60" 
               height = "30" 
               fill = "green">
            </rect>
            <circle cx = "0" 
               cy = "0" 
               r = "30" 
               fill = "red"/>
         </g>
      </svg>
   </body>
</html>

Đoạn mã trên sẽ mang lại kết quả như sau.

Một ví dụ tối thiểu

Để tạo hình ảnh SVG, hãy cố gắng chia tỷ lệ và xoay nó bằng cách sử dụng phép biến đổi, chúng ta hãy làm theo các bước được đưa ra bên dưới.

Step 1 - Tạo một hình ảnh SVG và đặt chiều rộng là 300 pixel và chiều cao là 300 pixel.

<svg width = "300" height = "300">

</svg>

Step 2 - Tạo nhóm SVG.

<svg width = "300" height = "300">
   <g>
   </g>
</svg>

Step 3 - Tạo một hình chữ nhật có chiều dài 60 và chiều cao 30 và tô màu xanh lá cây.

<svg width = "300" height = "300">
   <g>
      <rect x = "20" 
         y = "20" 
         width = "60" 
         height = "30" 
         fill = "green">
      </rect>
   </g>
</svg>

Step 4 - Tạo một hình tròn bán kính 30 và tô màu đỏ.

<svg width = "300" height = "300">
   <g>
      <rect x = "20" 
         y = "20" 
         width = "60" 
         height = "30" 
         fill = "green">
      </rect>
      <circle cx = "0" 
         cy = "0" 
         r = "30" 
         fill = "red"/>
   </g>
</svg>

Step 5 - Thêm thuộc tính biến đổi và thêm dịch và xoay như hình bên dưới.

<svg width = "300" height = "300">
   <g transform = "translate(60,60) rotate(30)">
      <rect x = "20" 
         y = "20" 
         width = "60" 
         height = "60" 
         fill = "green">
      </rect>
      <circle cx = "0" 
         cy = "0" 
         r = "30" 
         fill = "red"/>
   </g>
</svg>

Step 6 - Tạo một tài liệu HTML, “svg_transform_rotate_group.html” và tích hợp SVG ở trên như được giải thích bên dưới.

<!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>
      <div id = "svgcontainer">
         <svg width = "300" height = "300">
            <g transform = "translate(60,60) rotate(30)">
               <rect x = "20" 
                  y = "20" 
                  width = "60" 
                  height = "60" 
                  fill = "green">
               </rect>
               <circle cx = "0" 
                  cy = "0" 
                  r = "30" 
                  fill = "red"/>
            </g>
         </svg>
      </div>
   </body>
</html>

Đoạn mã trên sẽ mang lại kết quả như sau.

Chuyển đổi bằng D3.js

Để tạo SVG bằng D3.js, chúng ta hãy làm theo các bước dưới đây.

Step 1 - Tạo một vùng chứa để chứa ảnh SVG như giải thích bên dưới.

<div id = "svgcontainer"></div>

Step 2 - Tạo một ảnh SVG như giải thích bên dưới.

var width = 300;
var height = 300;
var svg = d3.select("#svgcontainer")
   .append("svg")
   .attr("width", width)
   .attr("height", height);

Step 3 - Tạo một phần tử nhóm SVG và đặt các thuộc tính dịch và xoay.

var group = svg.append("g").attr("transform", "translate(60, 60) rotate(30)");

Step 4 - Tạo một hình chữ nhật SVG và nối nó vào bên trong nhóm.

var rect = group
   .append("rect")
   .attr("x", 20)
   .attr("y", 20)
   .attr("width", 60)
   .attr("height", 30)
   .attr("fill", "green")

Step 5 - Tạo một vòng kết nối SVG và nối nó vào bên trong nhóm.

var circle = group
   .append("circle")
   .attr("cx", 0)
   .attr("cy", 0)
   .attr("r", 30)
   .attr("fill", "red")

Mã hoàn chỉnh như sau:

<!DOCTYPE html>
<html lang = "en">
   <head>
      <title>SVG rectangle</title>
      <script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
      <style>
         body { font-family: Arial; }
      </style>
   </head>

   <body>
      <div id = "svgcontainer"></div>
         <script language = "javascript">
            var width = 300;
            var height = 300;
            var svg = d3.select("#svgcontainer")
               .append("svg")
               .attr("width", width)
               .attr("height", height);

            var group = svg.append("g")
               .attr("transform", "translate(60, 60) rotate(30)");
            
            var rect = group.append("rect")
               .attr("x", 20)
               .attr("y", 20)
               .attr("width", 60)
               .attr("height", 30)
               .attr("fill", "green")
            
            var circle = group
               .append("circle")
               .attr("cx", 0)
               .attr("cy", 0)
               .attr("r", 30)
               .attr("fill", "red")
         </script>
      </div>
   </body>
</html>

Đoạn mã trên sẽ mang lại kết quả như sau.

Thư viện chuyển đổi

D3.js cung cấp một thư viện riêng để quản lý chuyển đổi mà không cần tạo thủ công các thuộc tính biến đổi. Nó cung cấp các phương pháp để xử lý tất cả các loại biến đổi. Một số phương pháp làtransform(), translate(), scale(), rotate(), v.v. Bạn có thể bao gồm d3-transform trong trang web của bạn bằng cách sử dụng tập lệnh sau.

<script src = "http://d3js.org/d3.v4.min.js"></script>
<script src = "d3-transform.js"></script>

Trong ví dụ trên, mã chuyển đổi có thể được viết như hình dưới đây:

var my_transform = d3Transform()
   .translate([60, 60])
   .rotate(30);

var group = svg
   .append("g")
   .attr("transform", my_transform);