D3.js - API đường dẫn

Đường dẫn được sử dụng để vẽ Hình chữ nhật, Hình tròn, Hình elip, Hình đa giác, Đa giác, Đường thẳng và Đường cong. Đường dẫn SVG đại diện cho đường viền của một hình dạng có thể được Stroked, Filled, Được sử dụng làm đường Clipping Path hoặc bất kỳ sự kết hợp nào của cả ba. Chương này giải thích chi tiết về API đường dẫn.

Định cấu hình đường dẫn

Bạn có thể định cấu hình API Đường dẫn bằng cách sử dụng tập lệnh bên dưới.

<script src = "https://d3js.org/d3-path.v1.min.js"></script>
<script>

</script>

Phương thức API đường dẫn

Một số phương pháp API Đường dẫn được sử dụng phổ biến nhất được mô tả ngắn gọn như sau.

d3.path() - Phương thức này được sử dụng để tạo một đường dẫn mới.
path.moveTo(x, y) - Phương thức này được sử dụng để di chuyển các giá trị x và y được chỉ định.
path.closePath() - Phương thức này dùng để đóng đường dẫn hiện tại.
path.lineTo(x, y) - Phương pháp này dùng để tạo một đường thẳng từ điểm hiện tại đến các giá trị x, y xác định.
path.quadraticCurveTo(cpx, cpy, x, y) - Phương pháp này dùng để vẽ đường cong bậc hai từ điểm hiện tại đến điểm xác định.
path.bezierCurveTo(cpx1, cpy1, cpx2, cpy2, x, y) - Phương pháp này được sử dụng để vẽ một đường cong bezier từ điểm hiện tại đến điểm xác định.
path.arcTo(x1, y1, x2, y2, radius) - Phương pháp này dùng để vẽ một cung tròn từ điểm hiện tại đến một điểm xác định (x1, y1) và kết thúc đoạn thẳng giữa các điểm xác định (x1, y1) và (x2, y2).
path.arc(x, y, radius, startAngle, endAngle[, anticlockwise])- Phương pháp này được sử dụng để vẽ một cung tròn đến tâm xác định (x, y), bán kính, startAngle và endAngle. Nếu giá trị ngược chiều kim đồng hồ là đúng thì cung được vẽ theo hướng ngược chiều kim đồng hồ, ngược lại nó được vẽ theo chiều kim đồng hồ.
path.rect(x, y, w, h)- Phương thức này được sử dụng để tạo đường dẫn con mới chỉ chứa bốn điểm (x, y), (x + w, y), (x + w, y + h), (x, y + h). Với bốn điểm được nối với nhau bằng các đường thẳng đánh dấu đường dẫn con là đã đóng. Tương đương với context.rect và sử dụng các lệnh “lineto” của SVG.
path.toString() - Trả về biểu diễn chuỗi của đường dẫn này theo đặc tả dữ liệu đường dẫn của SVG.

Thí dụ

Hãy để chúng tôi vẽ một đường đơn giản trong D3 bằng cách sử dụng API đường dẫn. Tạo một trang weblinepath.html và thêm các thay đổi sau vào đó.

<!DOCTYPE html>
<meta charset = "UTF-8">
   <head>
      <title>SVG path line Generator</title>
   </head>

   <style>
      path {
         fill: green;
         stroke: #aaa;
      }
   </style>
   
   <body>
      <svg width = "600" height = "100">
         <path transform = "translate(200, 0)" />
      </svg>
      
      <script src = "https://d3js.org/d3.v4.min.js"></script>
      <script>
         var data = [[0, 20], [50, 30], [100, 50], [200, 60], [300, 90]];
         var lineGenerator = d3.line();
         var pathString = lineGenerator(data);
         d3.select('path').attr('d', pathString);
      </script>
   </body>
</html>

Bây giờ, hãy yêu cầu trình duyệt và chúng ta sẽ thấy kết quả sau.