D3.js - SVG Dönüşümü

SVG, tek bir SVG şekil öğesini veya SVG öğesi grubunu dönüştürmek için seçenekler sağlar. SVG dönüştürme destekleriTranslate, Scale, Rotate ve Skew. Bu bölümde dönüşümü öğrenelim.

SVG Dönüşümüne Giriş

SVG yeni bir öznitelik sunar, transformdönüşümü desteklemek için. Olası değerler aşağıdakilerden biri veya daha fazlasıdır,

Translate - İki seçenek gerektirir, tx x ekseni boyunca çeviriyi ifade eder ve tyy ekseni boyunca ötelemeyi ifade eder. İçinExample- çevir (30 30).
Rotate - Üç seçenek gerektirir, angle dönme açısını ifade eder, cx ve cyx ve y eksenindeki dönüşün merkezini ifade eder. Eğercx ve cybelirtilmezse, varsayılan olarak koordinat sisteminin geçerli başlangıcına döner. İçinExample - döndürün (60).
Scale - İki seçenek gerektirir, sx x ekseni boyunca ölçekleme faktörünü ifade eder ve syy ekseni boyunca ölçeklendirme faktörünü ifade eder. Buraya,sy isteğe bağlıdır ve değerini alır sxbelirtilmemişse. İçinExample - ölçek (10).
Skew (SkewX and SkewY)- Tek bir seçenek gerektirir; skew-angleSkewX için x ekseni boyunca açı ve SkewY için y ekseni boyunca açı anlamına gelir. İçinExample - çarpıklık (20).

Aşağıda açıklanan, translate içeren SVG dikdörtgenine bir örnek -

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

   <body>
      <svg width = "300" height = "300">
         <rect x = "20" 
            y = "20"
            width = "60"
            height = "60"
            fill = "green"
            transform = "translate(30 30)">
         </rect>
      </svg>
   </body>
</html>

Yukarıdaki kod aşağıdaki sonucu verecektir.

Ayırma olarak boşluk kullanılarak tek bir SVG öğesi için birden fazla dönüşüm belirtilebilir. Birden fazla değer belirtilirse, dönüşüm belirtilen sırayla sıralı olarak uygulanacaktır.

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

   <body>
      <svg width = "300" height = "300">
         <rect x = "20" 
            y = "20" 
            width = "60" 
            height = "60" 
            fill = "green" 
            transform = "translate(60 60) rotate(45)">
         </rect>
      </svg>
   </body>
</html>

Yukarıdaki kod aşağıdaki sonucu verecektir.

SVG grup öğesine de dönüşüm uygulanabilir. Bu, SVG'de tanımlanan karmaşık grafikleri aşağıda açıklandığı gibi dönüştürmeyi sağlar.

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

   <body>
      <svg width = "300" height = "300">
         <g transform = "translate(60,60) rotate(30)">
            <rect x = "20" 
               y = "20" 
               width = "60" 
               height = "30" 
               fill = "green">
            </rect>
            <circle cx = "0" 
               cy = "0" 
               r = "30" 
               fill = "red"/>
         </g>
      </svg>
   </body>
</html>

Yukarıdaki kod aşağıdaki sonucu verecektir.

Minimal Bir Örnek

Bir SVG görüntüsü oluşturmak için, ölçeklemeyi deneyin ve dönüşümü kullanarak döndürün, aşağıda verilen adımları takip edelim.

Step 1 - Bir SVG görüntüsü oluşturun ve genişliği 300 piksel ve yüksekliği 300 piksel olarak ayarlayın.

<svg width = "300" height = "300">

</svg>

Step 2 - Bir SVG grubu oluşturun.

<svg width = "300" height = "300">
   <g>
   </g>
</svg>

Step 3 - 60 uzunluğunda ve 30 yüksekliğinde bir dikdörtgen oluşturun ve yeşil renkle doldurun.

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

Step 4 - 30 yarıçaplı bir daire oluşturun ve kırmızı renkle doldurun.

<svg width = "300" height = "300">
   <g>
      <rect x = "20" 
         y = "20" 
         width = "60" 
         height = "30" 
         fill = "green">
      </rect>
      <circle cx = "0" 
         cy = "0" 
         r = "30" 
         fill = "red"/>
   </g>
</svg>

Step 5 - Bir dönüştürme özelliği ekleyin ve aşağıda gösterildiği gibi çeviri ve döndürme ekleyin.

<svg width = "300" height = "300">
   <g transform = "translate(60,60) rotate(30)">
      <rect x = "20" 
         y = "20" 
         width = "60" 
         height = "60" 
         fill = "green">
      </rect>
      <circle cx = "0" 
         cy = "0" 
         r = "30" 
         fill = "red"/>
   </g>
</svg>

Step 6 - "svg_transform_rotate_group.html" adlı bir HTML belgesi oluşturun ve yukarıdaki SVG'yi aşağıda açıklandığı gibi entegre edin.

<!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">
            <g transform = "translate(60,60) rotate(30)">
               <rect x = "20" 
                  y = "20" 
                  width = "60" 
                  height = "60" 
                  fill = "green">
               </rect>
               <circle cx = "0" 
                  cy = "0" 
                  r = "30" 
                  fill = "red"/>
            </g>
         </svg>
      </div>
   </body>
</html>

Yukarıdaki kod aşağıdaki sonucu verecektir.

D3.js Kullanarak Dönüşüm

D3.js kullanarak SVG oluşturmak için, aşağıda verilen adımları takip edelim.

Step 1 - SVG görüntüsünü aşağıda açıklandığı gibi tutmak için bir kap oluşturun.

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

Step 2 - Aşağıda açıklandığı gibi bir SVG görüntüsü oluşturun.

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

Step 3 - Bir SVG grup öğesi oluşturun ve çeviri ve döndürme niteliklerini ayarlayın.

var group = svg.append("g").attr("transform", "translate(60, 60) rotate(30)");

Step 4 - Bir SVG dikdörtgeni oluşturun ve bunu grubun içine ekleyin.

var rect = group
   .append("rect")
   .attr("x", 20)
   .attr("y", 20)
   .attr("width", 60)
   .attr("height", 30)
   .attr("fill", "green")

Step 5 - Bir SVG çemberi oluşturun ve bunu grubun içine ekleyin.

var circle = group
   .append("circle")
   .attr("cx", 0)
   .attr("cy", 0)
   .attr("r", 30)
   .attr("fill", "red")

Kodun tamamı aşağıdaki gibidir -

<!DOCTYPE html>
<html lang = "en">
   <head>
      <title>SVG rectangle</title>
      <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);

            var group = svg.append("g")
               .attr("transform", "translate(60, 60) rotate(30)");
            
            var rect = group.append("rect")
               .attr("x", 20)
               .attr("y", 20)
               .attr("width", 60)
               .attr("height", 30)
               .attr("fill", "green")
            
            var circle = group
               .append("circle")
               .attr("cx", 0)
               .attr("cy", 0)
               .attr("r", 30)
               .attr("fill", "red")
         </script>
      </div>
   </body>
</html>

Yukarıdaki kod aşağıdaki sonucu verecektir.

Kitaplığı Dönüştür

D3.js, dönüştürme özniteliklerini manuel olarak oluşturmadan dönüşümü yönetmek için ayrı bir kitaplık sağlar. Her tür dönüşümü ele almak için yöntemler sağlar. Yöntemlerden bazılarıtransform(), translate(), scale(), rotate()vb. Dahil edebilirsiniz d3-transform aşağıdaki komut dosyasını kullanarak web sayfanızda.

<script src = "http://d3js.org/d3.v4.min.js"></script>
<script src = "d3-transform.js"></script>

Yukarıdaki örnekte, dönüşüm kodu aşağıda gösterildiği gibi yazılabilir -

var my_transform = d3Transform()
   .translate([60, 60])
   .rotate(30);

var group = svg
   .append("g")
   .attr("transform", my_transform);