D3.js - Introduzione a SVG

SVG sta per Scalable Vector Graphics. SVG è un formato di grafica vettoriale basato su XML. Fornisce opzioni per disegnare forme diverse come Linee, Rettangoli, Cerchi, Ellissi, ecc. Quindi, progettare visualizzazioni con SVG ti dà più potenza e flessibilità.

Caratteristiche di SVG

Alcune delle caratteristiche salienti di SVG sono le seguenti:

  • SVG è un formato di immagine basato su vettori ed è basato su testo.
  • SVG ha una struttura simile all'HTML.
  • SVG può essere rappresentato come un file Document object model.
  • Le proprietà SVG possono essere specificate come attributi.
  • SVG dovrebbe avere posizioni assolute rispetto all'origine (0, 0).
  • SVG può essere incluso così com'è nel documento HTML.

Un esempio minimo

Creiamo un'immagine SVG minima e includiamola nel documento HTML.

Step 1 - Crea un'immagine SVG e imposta la larghezza su 300 pixel e l'altezza su 300 pixel.

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

</svg>

Qui, il svgtag avvia un'immagine SVG e ha larghezza e altezza come attributi. L'unità predefinita del formato SVG èpixel.

Step 2 - Crea una linea che inizia a (100, 100) e termina a (200, 100) e imposta il colore rosso per la linea.

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

Qui, il line tag disegna una linea e i suoi attributi x1, y1 si riferisce al punto di partenza e x2, y2si riferisce al punto finale. L'attributo style imposta il colore e lo spessore della linea utilizzando ilstroke e il stroke-width stili.

  • x1 - Questa è la coordinata x del primo punto.

  • y1 - Questa è la coordinata y del primo punto.

  • x2 - Questa è la coordinata x del secondo punto.

  • y2 - Questa è la coordinata y del secondo punto.

  • stroke - Colore della linea.

  • stroke-width - Spessore della linea.

Step 3 - Crea un documento HTML, "svg_line.html" e integra l'SVG sopra come mostrato di seguito -

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

Il programma precedente produrrà il seguente risultato.

SVG utilizzando D3.js

Per creare SVG utilizzando D3.js, seguiamo i passaggi indicati di seguito.

Step 1 - Crea un contenitore per contenere l'immagine SVG come indicato di seguito.

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

Step 2- Selezionare il contenitore SVG utilizzando il metodo select () e iniettare l'elemento SVG utilizzando il metodo append (). Aggiungi gli attributi e gli stili usando i metodi attr () e style ().

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

Step 3 - Allo stesso modo, aggiungi il file line elemento all'interno di svg elemento come mostrato di seguito.

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

Il codice completo è il seguente:

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

Il codice precedente produce il risultato seguente.

Elemento rettangolo

Un rettangolo è rappresentato dal <rect> tag come mostrato di seguito.

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

Gli attributi di un rettangolo sono i seguenti:

  • x - Questa è la coordinata x dell'angolo superiore sinistro del rettangolo.

  • y - Questa è la coordinata y dell'angolo superiore sinistro del rettangolo.

  • width - Questo denota la larghezza del rettangolo.

  • height - Questo denota l'altezza del rettangolo.

Un semplice rettangolo in SVG è definito come spiegato di seguito.

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

Lo stesso rettangolo può essere creato dinamicamente come descritto di seguito.

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

Il codice precedente produrrà il seguente risultato.

Elemento del cerchio

Un cerchio è rappresentato dal <circle> tag come spiegato di seguito.

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

Gli attributi del cerchio sono i seguenti:

  • cx - Questa è la coordinata x del centro del cerchio.

  • cy - Questa è la coordinata y del centro del cerchio.

  • r - Questo denota il raggio del cerchio.

Di seguito viene descritto un semplice cerchio in SVG.

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

Lo stesso cerchio può essere creato dinamicamente come descritto di seguito.

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

Il codice precedente produrrà il seguente risultato.

Elemento ellisse

L'elemento SVG Ellipse è rappresentato dal <ellipse> tag come spiegato di seguito.

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

Gli attributi di un'ellisse sono i seguenti:

  • cx - Questa è la coordinata x del centro dell'ellisse.

  • cy - Questa è la coordinata y del centro dell'ellisse.

  • rx - Questo è il raggio x del cerchio.

  • ry - Questo è il raggio y del cerchio.

Di seguito viene descritta una semplice ellisse nell'SVG.

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

La stessa ellisse può essere creata dinamicamente come di seguito,

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

Il codice precedente produrrà il seguente risultato.