D3.js - Paths API

เส้นทางใช้ในการวาดรูปสี่เหลี่ยมวงกลมวงรีโพลีไลน์รูปหลายเหลี่ยมเส้นตรงและเส้นโค้ง SVG Paths แสดงโครงร่างของรูปร่างที่สามารถ Stroked, Filled, ใช้เป็น Clipping Path หรือทั้งสามอย่างผสมกันก็ได้ บทนี้จะอธิบายรายละเอียด Paths API

การกำหนดค่าเส้นทาง

คุณสามารถกำหนดค่า Paths API โดยใช้สคริปต์ด้านล่าง

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

</script>

วิธี API เส้นทาง

บางส่วนของวิธีการ Paths API ที่ใช้บ่อยที่สุดอธิบายสั้น ๆ ดังนี้

d3.path() - วิธีนี้ใช้เพื่อสร้างเส้นทางใหม่
path.moveTo(x, y) - วิธีนี้ใช้เพื่อย้ายค่า x และ y ที่ระบุ
path.closePath() - วิธีนี้ใช้เพื่อปิดเส้นทางปัจจุบัน
path.lineTo(x, y) - วิธีนี้ใช้เพื่อสร้างเส้นจากจุดปัจจุบันไปยังค่า x, y ที่กำหนด
path.quadraticCurveTo(cpx, cpy, x, y) - วิธีนี้ใช้ในการวาดเส้นโค้งกำลังสองจากจุดปัจจุบันไปยังจุดที่ระบุ
path.bezierCurveTo(cpx1, cpy1, cpx2, cpy2, x, y) - วิธีนี้ใช้ในการวาดเส้นโค้งเบเซียร์จากจุดปัจจุบันไปยังจุดที่ระบุ
path.arcTo(x1, y1, x2, y2, radius) - วิธีนี้ใช้ในการวาดส่วนโค้งวงกลมจากจุดปัจจุบันไปยังจุดที่ระบุ (x1, y1) และสิ้นสุดเส้นระหว่างจุดที่ระบุ (x1, y1) และ (x2, y2)
path.arc(x, y, radius, startAngle, endAngle[, anticlockwise])- วิธีนี้ใช้เพื่อวาดส่วนโค้งวงกลมไปยังจุดศูนย์กลางที่ระบุ (x, y), รัศมี, startAngle และ endAngle หากค่าทวนเข็มนาฬิกาเป็นจริงส่วนโค้งจะถูกวาดในทิศทางทวนเข็มนาฬิกามิฉะนั้นจะวาดในทิศทางตามเข็มนาฬิกา
path.rect(x, y, w, h)- วิธีนี้ใช้เพื่อสร้างเส้นทางย่อยใหม่ที่มีเพียงสี่จุด (x, y), (x + w, y), (x + w, y + h), (x, y + h) เมื่อจุดทั้งสี่นี้เชื่อมต่อกันด้วยเส้นตรงจะทำเครื่องหมายเส้นทางย่อยว่าปิด เทียบเท่ากับ context.rect และใช้คำสั่ง "lineto" ของ SVG
path.toString() - ส่งกลับการแสดงสตริงของเส้นทางนี้ตามข้อกำหนดข้อมูลเส้นทางของ SVG

ตัวอย่าง

ให้เราลากเส้นง่ายๆใน D3 โดยใช้ path API สร้างเว็บเพจlinepath.html และเพิ่มการเปลี่ยนแปลงต่อไปนี้

<!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>

ตอนนี้ขอเบราว์เซอร์แล้วเราจะเห็นผลลัพธ์ต่อไปนี้