D3.js - Pengantar SVG

SVG adalah singkatan dari Scalable Vector Graphics. SVG adalah format grafik vektor berbasis XML. Ini memberikan opsi untuk menggambar berbagai bentuk seperti Garis, Persegi Panjang, Lingkaran, Elips, dll. Karenanya, merancang visualisasi dengan SVG memberi Anda lebih banyak kekuatan dan fleksibilitas.

Fitur SVG

Beberapa fitur SVG yang menonjol adalah sebagai berikut -

SVG adalah format gambar berbasis vektor dan berbasis teks.
SVG mirip dengan struktur HTML.
SVG dapat direpresentasikan sebagai a Document object model.
Properti SVG dapat ditentukan sebagai atribut.
SVG harus memiliki posisi absolut relatif terhadap asalnya (0, 0).
SVG dapat dimasukkan seperti yang ada di dokumen HTML.

Contoh Minimal

Mari kita membuat gambar SVG minimal dan memasukkannya ke dalam dokumen HTML.

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

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

</svg>

Di sini svgtag memulai gambar SVG dan memiliki lebar dan tinggi sebagai atribut. Unit default dari format SVG adalahpixel.

Step 2 - Buat garis mulai dari (100, 100) dan diakhiri pada (200, 100) dan atur warna merah untuk garis tersebut.

<line x1 = "100" y1 = "100" x2 = "200" y2 = "200" 
   style = "stroke:rgb(255,0,0);stroke-width:2"/>

Di sini line tag menggambar garis dan atributnya x1, y1 mengacu pada titik awal dan x2, y2mengacu pada titik akhir. Atribut gaya menyetel warna dan ketebalan garis menggunakanstroke dan stroke-width gaya.

x1 - Ini adalah koordinat x dari titik pertama.
y1 - Ini adalah koordinat y dari titik pertama.
x2 - Ini adalah koordinat x dari titik kedua.
y2 - Ini adalah koordinat y dari titik kedua.
stroke - Warna garis.
stroke-width - Ketebalan garis.

Step 3 - Buat dokumen HTML, "svg_line.html" dan integrasi SVG di atas seperti yang ditunjukkan 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">
            <line x1 = "100" y1 = "100" 
               x2 = "200" y2 = "200" style = "stroke:rgb(255,0,0);
               stroke-width:2"/>
         </svg>
      </div>
      <p></p>
      <p></p>
   </body>
</html>

Program di atas akan memberikan hasil sebagai berikut.

SVG 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 diberikan di bawah ini.

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

Step 2- Pilih container SVG menggunakan metode select () dan masukkan elemen SVG menggunakan metode append (). Tambahkan atribut dan gaya menggunakan metode attr () dan style ().

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

Step 3 - Demikian pula, tambahkan line elemen di dalam svg elemen seperti yang ditunjukkan di bawah ini.

svg.append("line")
   .attr("x1", 100)
   .attr("y1", 100)
   .attr("x2", 200) 
   .attr("y2", 200)
   .style("stroke", "rgb(255,0,0)")
   .style("stroke-width", 2);

Kode lengkapnya adalah sebagai berikut -

<!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">
      </div>
      <script language = "javascript">
         var width = 300;
         var height = 300;
         var svg = d3.select("#svgcontainer")
            .append("svg")
            .attr("width", width)
            .attr("height", height);
         svg.append("line")
            .attr("x1", 100)
            .attr("y1", 100)
            .attr("x2", 200)
            .attr("y2", 200)
            .style("stroke", "rgb(255,0,0)")
            .style("stroke-width", 2);
      </script>
   </body>
</html>

Kode di atas menghasilkan hasil sebagai berikut.

Elemen Persegi Panjang

Persegi panjang diwakili oleh <rect> tag seperti yang ditunjukkan di bawah ini.

<rect x = "20" y = "20" width = "300" height = "300"></rect>

Atribut persegi panjang adalah sebagai berikut -

x - Ini adalah koordinat x dari pojok kiri atas persegi panjang.
y - Ini adalah koordinat y dari pojok kiri atas persegi panjang.
width - Ini menunjukkan lebar persegi panjang.
height - Ini menunjukkan tinggi persegi panjang.

Persegi panjang sederhana di SVG didefinisikan seperti yang dijelaskan di bawah ini.

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

Persegi panjang yang sama dapat dibuat secara dinamis seperti yang dijelaskan di bawah ini.

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

   <body>
      <div id = "svgcontainer"></div>
      <script>
         var width = 300;
         var height = 300;
         //Create SVG element
         var svg = d3.select("#svgcontainer")
            .append("svg")
            .attr("width", width)
            .attr("height", height);
         //Create and append rectangle element
         svg.append("rect")
            .attr("x", 20)
            .attr("y", 20)
            .attr("width", 200)
            .attr("height", 100)
            .attr("fill", "green");
      </script>
   </body>
</html>

Kode di atas akan menghasilkan hasil sebagai berikut.

Elemen Lingkaran

Sebuah lingkaran diwakili oleh <circle> tag seperti yang dijelaskan di bawah ini.

<circle cx = "200" cy = "50" r = "20"/>

Atribut lingkaran adalah sebagai berikut -

cx - Ini adalah koordinat x dari pusat lingkaran.
cy - Ini adalah koordinat y dari pusat lingkaran.
r - Ini menunjukkan jari-jari lingkaran.

Lingkaran sederhana dalam SVG dijelaskan di bawah ini.

<svg width = "300" height = "300">
   <circle cx = "200" cy = "50" r = "20" fill = "green"/>
</svg>

Lingkaran yang sama dapat dibuat secara dinamis seperti yang dijelaskan di bawah ini.

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

   <body>
      <div id = "svgcontainer"></div>
      <script>
         var width = 300;
         var height = 300;
         //Create SVG element
         var svg = d3.select("#svgcontainer")
            .append("svg")
            .attr("width", width)
            .attr("height", height);
         //Append circle 
         svg.append("circle")
            .attr("cx", 200)
            .attr("cy", 50)
            .attr("r", 20)
            .attr("fill", "green");
      </script>
   </body>
</html>

Kode di atas akan menghasilkan hasil sebagai berikut.

Elemen Ellipse

Elemen SVG Ellipse diwakili oleh <ellipse> tag seperti yang dijelaskan di bawah ini.

<ellipse cx = "200" cy = "50" rx = "100" ry = "50"/>

Atribut elips adalah sebagai berikut -

cx - Ini adalah koordinat x dari pusat elips.
cy - Ini adalah koordinat y dari pusat elips.
rx - Ini adalah jari-jari x lingkaran.
ry - Ini adalah jari-jari y lingkaran.

Elips sederhana di SVG dijelaskan di bawah ini.

<svg width = "300" height = "300">
   <ellipse cx = "200" cy = "50" rx = "100" ry = "50" fill = "green" />
</svg>

Elips yang sama dapat dibuat secara dinamis seperti di bawah ini,

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

   <body>
      <div id = "svgcontainer"></div>
      <script>
         var width = 300;
         var height = 300;
         var svg = d3.select("#svgcontainer")
            .append("svg")
            .attr("width", width)
            .attr("height", height);
         svg.append("ellipse")
            .attr("cx", 200)
            .attr("cy", 50)
            .attr("rx", 100)
            .attr("ry", 50)
            .attr("fill", "green")
      </script>
   </body>
</html>

Kode di atas akan menghasilkan hasil sebagai berikut.