D3.js - API Jalur

Paths digunakan untuk menggambar Rectangles, Circles, Ellipses, Polylines, Polygons, Straight Lines, dan Curves. SVG Paths merepresentasikan garis bentuk yang dapat di Stroked, Diisi, Digunakan sebagai Clipping Path, atau kombinasi ketiganya. Bab ini menjelaskan API Path secara detail.

Mengonfigurasi Jalur

Anda dapat mengonfigurasi API Jalur menggunakan skrip di bawah ini.

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

</script>

Metode API Jalur

Beberapa metode API Jalur yang paling umum digunakan dijelaskan secara singkat sebagai berikut.

d3.path() - Metode ini digunakan untuk membuat jalur baru.
path.moveTo(x, y) - Metode ini digunakan untuk memindahkan nilai x dan y yang ditentukan.
path.closePath() - Metode ini digunakan untuk menutup jalur saat ini.
path.lineTo(x, y) - Metode ini digunakan untuk membuat garis dari titik saat ini ke nilai x, y yang ditentukan.
path.quadraticCurveTo(cpx, cpy, x, y) - Metode ini digunakan untuk menggambar kurva kuadrat dari titik arus ke titik yang ditentukan.
path.bezierCurveTo(cpx1, cpy1, cpx2, cpy2, x, y) - Metode ini digunakan untuk menggambar kurva bezier dari titik arus ke titik yang ditentukan.
path.arcTo(x1, y1, x2, y2, radius) - Metode ini digunakan untuk menggambar busur lingkaran dari titik saat ini ke titik tertentu (x1, y1) dan mengakhiri garis antara titik yang ditentukan (x1, y1) dan (x2, y2).
path.arc(x, y, radius, startAngle, endAngle[, anticlockwise])- Metode ini digunakan untuk menggambar busur lingkaran ke pusat yang ditentukan (x, y), radius, startAngle dan endAngle. Jika nilai berlawanan arah jarum jam bernilai benar maka busur digambar berlawanan arah jarum jam, jika tidak maka busur akan digambar searah jarum jam.
path.rect(x, y, w, h)- Metode ini digunakan untuk membuat sub path baru yang hanya berisi empat titik (x, y), (x + w, y), (x + w, y + h), (x, y + h). Dengan empat titik ini dihubungkan dengan garis lurus menandai subpath sebagai tertutup. Setara dengan context.rect dan menggunakan perintah "lineto" SVG.
path.toString() - Mengembalikan representasi string dari jalur ini sesuai dengan spesifikasi data jalur SVG.

Contoh

Mari kita menggambar garis sederhana di D3 menggunakan API jalur. Buat halaman weblinepath.html dan tambahkan perubahan berikut di dalamnya.

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

Sekarang, minta browser dan kita akan melihat hasil berikut.