D3.js - SVG'ye Giriş

SVG, Scalable Vector Graphics. SVG, XML tabanlı bir vektör grafik formatıdır. Çizgiler, Dikdörtgenler, Daireler, Elipsler, vb. Gibi farklı şekiller çizmek için seçenekler sunar. Bu nedenle, SVG ile görselleştirmeler tasarlamak size daha fazla güç ve esneklik sağlar.

SVG'nin özellikleri

SVG'nin göze çarpan özelliklerinden bazıları aşağıdaki gibidir -

SVG, vektör tabanlı bir görüntü formatıdır ve metin tabanlıdır.
SVG, yapı olarak HTML'ye benzer.
SVG şu şekilde temsil edilebilir: Document object model.
SVG özellikleri öznitelikler olarak belirtilebilir.
SVG, orijine (0, 0) göre mutlak konumlara sahip olmalıdır.
SVG, HTML belgesinde olduğu gibi eklenebilir.

Minimal Bir Örnek

Minimal bir SVG görüntüsü oluşturalım ve bunu HTML belgesine dahil 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>

Burada svgetiketi bir SVG görüntüsünü başlatır ve nitelik olarak genişlik ve yüksekliğe sahiptir. SVG formatının varsayılan birimipixel.

Step 2 - (100, 100) ile başlayan ve (200, 100) ile biten bir çizgi oluşturun ve çizgi için kırmızı rengi ayarlayın.

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

Burada line etiketi bir çizgi ve özniteliklerini çizer x1, y1 başlangıç noktasına işaret eder ve x2, y2bitiş noktasına işaret eder. Style özelliği, çizginin rengini ve kalınlığını ayarlar.stroke ve stroke-width stilleri.

x1 - Bu, ilk noktanın x koordinatıdır.
y1 - Bu, ilk noktanın y koordinatıdır.
x2 - Bu, ikinci noktanın x koordinatıdır.
y2 - Bu, ikinci noktanın y koordinatıdır.
stroke - Çizginin rengi.
stroke-width - Çizginin kalınlığı.

Step 3 - "svg_line.html" adlı bir HTML belgesi oluşturun ve yukarıdaki SVG'yi aşağıda gösterildiği 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">
            <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>

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

D3.js Kullanan SVG

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 verildiği gibi tutmak için bir kap oluşturun.

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

Step 2- select () yöntemini kullanarak SVG kabını seçin ve append () yöntemini kullanarak SVG öğesini enjekte edin. Attr () ve style () yöntemlerini kullanarak nitelikleri ve stilleri ekleyin.

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

Step 3 - Benzer şekilde ekleyin line içindeki eleman svg aşağıda gösterildiği gibi.

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

Kodun tamamı aşağıdaki gibidir -

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

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

Dikdörtgen Eleman

Bir dikdörtgen şu şekilde gösterilir: <rect> aşağıda gösterildiği gibi etiketleyin.

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

Bir dikdörtgenin özellikleri aşağıdaki gibidir -

x - Bu, dikdörtgenin sol üst köşesinin x koordinatıdır.
y - Bu, dikdörtgenin sol üst köşesinin y koordinatıdır.
width - Bu, dikdörtgenin genişliğini gösterir.
height - Bu, dikdörtgenin yüksekliğini gösterir.

SVG'de basit bir dikdörtgen aşağıda açıklandığı gibi tanımlanır.

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

Aynı dikdörtgen, aşağıda açıklandığı gibi dinamik olarak oluşturulabilir.

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

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

Daire Elemanı

Bir daire şu şekilde temsil edilir: <circle> aşağıda açıklandığı gibi etiketleyin.

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

Çemberin nitelikleri aşağıdaki gibidir -

cx - Bu, çemberin merkezinin x koordinatıdır.
cy - Bu, çemberin merkezinin y koordinatıdır.
r - Bu, dairenin yarıçapını gösterir.

SVG'de basit bir daire aşağıda açıklanmıştır.

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

Aynı daire, aşağıda açıklandığı gibi dinamik olarak oluşturulabilir.

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

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

Elips Elemanı

SVG Ellipse öğesi şu şekilde temsil edilir: <ellipse> aşağıda açıklandığı gibi etiketleyin.

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

Bir elipsin nitelikleri aşağıdaki gibidir -

cx - Bu, elipsin merkezinin x koordinatıdır.
cy - Bu, elipsin merkezinin y koordinatıdır.
rx - Bu, dairenin x yarıçapıdır.
ry - Bu çemberin y yarıçapıdır.

SVG'deki basit bir elips aşağıda açıklanmıştır.

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

Aynı elips aşağıdaki gibi dinamik olarak oluşturulabilir,

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

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