D3.js - Giới thiệu về SVG

SVG là viết tắt của Scalable Vector Graphics. SVG là một định dạng đồ họa vector dựa trên XML. Nó cung cấp các tùy chọn để vẽ các hình dạng khác nhau như Đường thẳng, Hình chữ nhật, Hình tròn, Hình elip, v.v. Do đó, thiết kế hình ảnh trực quan với SVG mang lại cho bạn nhiều sức mạnh và tính linh hoạt hơn.

Đặc điểm của SVG

Một số tính năng nổi bật của SVG như sau:

SVG là một định dạng hình ảnh dựa trên vector và nó dựa trên văn bản.
SVG có cấu trúc tương tự như HTML.
SVG có thể được biểu diễn dưới dạng Document object model.
Thuộc tính SVG có thể được chỉ định dưới dạng thuộc tính.
SVG phải có vị trí tuyệt đối so với điểm gốc (0, 0).
SVG có thể được bao gồm trong tài liệu HTML.

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

Hãy để chúng tôi tạo một hình ảnh SVG tối thiểu và đưa nó vào tài liệu HTML.

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>

Đây, svgthẻ bắt đầu một hình ảnh SVG và nó có chiều rộng và chiều cao làm thuộc tính. Đơn vị mặc định của định dạng SVG làpixel.

Step 2 - Tạo một dòng bắt đầu tại (100, 100) và kết thúc tại (200, 100) và thiết lập màu đỏ cho dòng.

<line x1 = "100" y1 = "100" x2 = "200" y2 = "200" 
   style = "stroke:rgb(255,0,0);stroke-width:2"/>

Đây, line thẻ vẽ một đường và các thuộc tính của nó x1, y1 đề cập đến điểm bắt đầu và x2, y2đề cập đến điểm kết thúc. Thuộc tính style đặt màu và độ dày của đường bằng cách sử dụngstroke và stroke-width phong cách.

x1 - Đây là tọa độ x của điểm đầu tiên.
y1 - Đây là tọa độ y của điểm đầu tiên.
x2 - Đây là tọa độ x của điểm thứ hai.
y2 - Đây là tọa độ y của điểm thứ hai.
stroke - Màu sắc của đường nét.
stroke-width - Độ dày của dòng.

Step 3 - Tạo tài liệu HTML, “svg_line.html” và tích hợp SVG ở trên như hình dưới đây -

<!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">
            <line x1 = "100" y1 = "100" 
               x2 = "200" y2 = "200" style = "stroke:rgb(255,0,0);
               stroke-width:2"/>
         </svg>
      </div>
      <p></p>
      <p></p>
   </body>
</html>

Chương trình trên sẽ mang lại kết quả như sau.

SVG Sử dụ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ư hình dưới đây.

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

Step 2- Chọn vùng chứa SVG bằng phương thức select () và chèn phần tử SVG bằng phương thức append (). Thêm các thuộc tính và kiểu bằng cách sử dụng phương thức attr () và style ().

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

Step 3 - Tương tự, thêm line phần tử bên trong svg phần tử như hình dưới đây.

svg.append("line")
   .attr("x1", 100)
   .attr("y1", 100)
   .attr("x2", 200) 
   .attr("y2", 200)
   .style("stroke", "rgb(255,0,0)")
   .style("stroke-width", 2);

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>
      <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);
         svg.append("line")
            .attr("x1", 100)
            .attr("y1", 100)
            .attr("x2", 200)
            .attr("y2", 200)
            .style("stroke", "rgb(255,0,0)")
            .style("stroke-width", 2);
      </script>
   </body>
</html>

Đoạn mã trên cho kết quả sau.

Yếu tố hình chữ nhật

Một hình chữ nhật được đại diện bởi <rect> như hình bên dưới.

<rect x = "20" y = "20" width = "300" height = "300"></rect>

Các thuộc tính của hình chữ nhật như sau:

x - Đây là tọa độ x của góc trên bên trái của hình chữ nhật.
y - Đây là tọa độ y của góc trên bên trái của hình chữ nhật.
width - Điều này biểu thị chiều rộng của hình chữ nhật.
height - Điều này biểu thị chiều cao của hình chữ nhật.

Một hình chữ nhật đơn giản trong SVG được định nghĩa như giải thích bên dưới.

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

Có thể tạo động cùng một hình chữ nhật như mô tả bên dưới.

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

   <body>
      <div id = "svgcontainer"></div>
      <script>
         var width = 300;
         var height = 300;
         //Create SVG element
         var svg = d3.select("#svgcontainer")
            .append("svg")
            .attr("width", width)
            .attr("height", height);
         //Create and append rectangle element
         svg.append("rect")
            .attr("x", 20)
            .attr("y", 20)
            .attr("width", 200)
            .attr("height", 100)
            .attr("fill", "green");
      </script>
   </body>
</html>

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

Phần tử vòng tròn

Một vòng tròn được đại diện bởi <circle> như giải thích bên dưới.

<circle cx = "200" cy = "50" r = "20"/>

Các thuộc tính của vòng tròn như sau:

cx - Đây là tọa độ x của tâm đường tròn.
cy - Đây là tọa độ y của tâm đường tròn.
r - Điều này biểu thị bán kính của hình tròn.

Một vòng tròn đơn giản trong SVG được mô tả bên dưới.

<svg width = "300" height = "300">
   <circle cx = "200" cy = "50" r = "20" fill = "green"/>
</svg>

Cùng một vòng tròn có thể được tạo động như mô tả bên dưới.

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

   <body>
      <div id = "svgcontainer"></div>
      <script>
         var width = 300;
         var height = 300;
         //Create SVG element
         var svg = d3.select("#svgcontainer")
            .append("svg")
            .attr("width", width)
            .attr("height", height);
         //Append circle 
         svg.append("circle")
            .attr("cx", 200)
            .attr("cy", 50)
            .attr("r", 20)
            .attr("fill", "green");
      </script>
   </body>
</html>

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

Yếu tố hình elip

Phần tử SVG Ellipse được đại diện bởi <ellipse> như giải thích bên dưới.

<ellipse cx = "200" cy = "50" rx = "100" ry = "50"/>

Các thuộc tính của hình elip như sau:

cx - Đây là tọa độ x của tâm hình elip.
cy - Đây là tọa độ y của tâm hình elip.
rx - Đây là bán kính x của hình tròn.
ry - Đây là bán kính y của hình tròn.

Hình elip đơn giản trong SVG được mô tả bên dưới.

<svg width = "300" height = "300">
   <ellipse cx = "200" cy = "50" rx = "100" ry = "50" fill = "green" />
</svg>

Hình elip tương tự có thể được tạo động như bên dưới,

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

   <body>
      <div id = "svgcontainer"></div>
      <script>
         var width = 300;
         var height = 300;
         var svg = d3.select("#svgcontainer")
            .append("svg")
            .attr("width", width)
            .attr("height", height);
         svg.append("ellipse")
            .attr("cx", 200)
            .attr("cy", 50)
            .attr("rx", 100)
            .attr("ry", 50)
            .attr("fill", "green")
      </script>
   </body>
</html>

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