D3.js - Transformasi SVG

SVG memberikan opsi untuk mengubah satu elemen bentuk SVG atau sekelompok elemen SVG. Dukungan transformasi SVGTranslate, Scale, Rotate dan Skew. Mari kita pelajari transformasi dalam bab ini.

Pengantar Transformasi SVG

SVG memperkenalkan atribut baru, transformuntuk mendukung transformasi. Nilai yang mungkin adalah satu atau lebih dari berikut ini,

Translate - Dibutuhkan dua pilihan, tx merujuk terjemahan di sepanjang sumbu x dan tymengacu pada terjemahan di sepanjang sumbu y. UntukExample- terjemahkan (30 30).
Rotate - Dibutuhkan tiga opsi, angle mengacu pada sudut rotasi, cx dan cymengacu pada pusat rotasi pada sumbu x dan y. Jikacx dan cytidak ditentukan, maka defaultnya adalah asal sistem koordinat saat ini. UntukExample - putar (60).
Scale - Dibutuhkan dua pilihan, sx mengacu pada faktor skala di sepanjang sumbu x dan symengacu pada faktor skala di sepanjang sumbu y. Sini,sy bersifat opsional dan mengambil nilai sx, jika tidak ditentukan. UntukExample - skala (10).
Skew (SkewX and SkewY)- Dibutuhkan satu pilihan; ituskew-anglemengacu pada sudut sepanjang sumbu x untuk SkewX dan sudut sepanjang sumbu y untuk SkewY. UntukExample - skewx (20).

Contoh persegi panjang SVG dengan terjemahan, yang dijelaskan sebagai berikut -

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

Kode di atas akan menghasilkan hasil sebagai berikut.

Lebih dari satu transformasi dapat ditentukan untuk satu elemen SVG menggunakan ruang sebagai pemisah. Jika lebih dari satu nilai ditentukan, transformasi akan diterapkan satu per satu secara berurutan dalam urutan yang ditentukan.

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

Kode di atas akan menghasilkan hasil sebagai berikut.

Transformasi juga dapat diterapkan ke elemen grup SVG. Ini memungkinkan untuk mengubah grafik kompleks yang ditentukan dalam SVG seperti yang dijelaskan di bawah ini.

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

Kode di atas akan menghasilkan hasil sebagai berikut.

Contoh Minimal

Untuk membuat gambar SVG, coba skala, dan putar menggunakan transformasi, mari kita ikuti langkah-langkah yang diberikan di bawah ini.

Step 1 - Buat gambar SVG dan setel lebar 300 piksel dan tinggi 300 piksel.

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

</svg>

Step 2 - Buat grup SVG.

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

Step 3 - Buat persegi panjang dengan panjang 60 dan tinggi 30 dan isi dengan warna hijau.

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

Step 4 - Buat lingkaran dengan radius 30 dan isi dengan warna merah.

<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 - Tambahkan atribut transformasi dan tambahkan terjemahan dan putar seperti yang ditunjukkan di bawah ini.

<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 - Buat dokumen HTML, “svg_transform_rotate_group.html” dan integrasikan SVG di atas seperti yang dijelaskan di bawah ini.

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

Kode di atas akan menghasilkan hasil sebagai berikut.

Transformasi Menggunakan D3.js

Untuk membuat SVG menggunakan D3.js, mari kita ikuti langkah-langkah yang diberikan di bawah ini.

Step 1 - Buat wadah untuk menampung gambar SVG seperti yang dijelaskan di bawah ini.

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

Step 2 - Buat gambar SVG seperti yang dijelaskan di bawah ini.

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

Step 3 - Buat elemen grup SVG dan atur atribut terjemahkan dan putar.

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

Step 4 - Buat persegi panjang SVG dan tambahkan di dalam grup.

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

Step 5 - Buat lingkaran SVG dan tambahkan di dalam grup.

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

Kode lengkapnya adalah sebagai berikut -

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

Kode di atas akan menghasilkan hasil sebagai berikut.

Transformasi Perpustakaan

D3.js menyediakan pustaka terpisah untuk mengelola transformasi tanpa membuat atribut transformasi secara manual. Ini menyediakan metode untuk menangani semua jenis transformasi. Beberapa metodenya adalahtransform(), translate(), scale(), rotate(), dll. Anda dapat memasukkan d3-transform di halaman web Anda menggunakan skrip berikut.

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

Dalam contoh di atas, kode transformasi dapat ditulis seperti yang ditunjukkan di bawah ini -

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

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