D3.js - Yollar API'si

Yollar, Dikdörtgenler, Daireler, Elipsler, Çoklu Çizgiler, Çokgenler, Düz Çizgiler ve Eğriler çizmek için kullanılır. SVG Yolları, Konturlu, Dolu, Kırpma Yolu Olarak Kullanılabilen veya üçünün herhangi bir kombinasyonu olabilen bir şeklin anahatlarını temsil eder. Bu bölümde Paths API ayrıntılı olarak açıklanmaktadır.

Yolları Yapılandırma

Paths API'sini aşağıdaki komut dosyasını kullanarak yapılandırabilirsiniz.

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

</script>

Paths API Yöntemleri

En sık kullanılan Paths API yöntemlerinden bazıları aşağıda kısaca açıklanmıştır.

d3.path() - Bu yöntem, yeni bir yol oluşturmak için kullanılır.
path.moveTo(x, y) - Bu yöntem, belirtilen x ve y değerlerini taşımak için kullanılır.
path.closePath() - Bu yöntem, mevcut yolu kapatmak için kullanılır.
path.lineTo(x, y) - Bu yöntem, geçerli noktadan tanımlanan x, y değerlerine doğru bir çizgi oluşturmak için kullanılır.
path.quadraticCurveTo(cpx, cpy, x, y) - Bu yöntem, geçerli noktadan belirtilen noktaya ikinci dereceden bir eğri çizmek için kullanılır.
path.bezierCurveTo(cpx1, cpy1, cpx2, cpy2, x, y) - Bu yöntem, geçerli noktadan belirtilen noktaya bir bezier eğrisi çizmek için kullanılır.
path.arcTo(x1, y1, x2, y2, radius) - Bu yöntem, geçerli noktadan belirli bir noktaya (x1, y1) dairesel bir yay çizmek ve çizgiyi belirtilen noktalar (x1, y1) ve (x2, y2) arasında sonlandırmak için kullanılır.
path.arc(x, y, radius, startAngle, endAngle[, anticlockwise])- Bu yöntem, belirtilen merkez (x, y), radius, startAngle ve endAngle'a dairesel bir yay çizmek için kullanılır. Saat yönünün tersine değer doğruysa yay saat yönünün tersine çekilir, aksi takdirde saat yönünde çizilir.
path.rect(x, y, w, h)- Bu yöntem, yalnızca dört noktayı (x, y), (x + w, y), (x + w, y + h), (x, y + h) içeren yeni alt yol oluşturmak için kullanılır. Düz çizgilerle birbirine bağlanan bu dört nokta alt yolu kapalı olarak işaretler. Context.rect'e eşdeğerdir ve SVG'nin "lineto" komutlarını kullanır.
path.toString() - SVG'nin yol verisi belirtimine göre bu yolun dize temsilini döndürür.

Misal

Yol API'sini kullanarak D3'te basit bir çizgi çizelim. Bir web sayfası oluşturunlinepath.html ve aşağıdaki değişiklikleri ekleyin.

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

Şimdi tarayıcıyı isteyin ve aşağıdaki sonucu göreceğiz.