D3.js - Introduction à SVG

SVG signifie Scalable Vector Graphics. SVG est un format graphique vectoriel basé sur XML. Il fournit des options pour dessiner différentes formes telles que des lignes, des rectangles, des cercles, des ellipses, etc. Par conséquent, la conception de visualisations avec SVG vous donne plus de puissance et de flexibilité.

Caractéristiques de SVG

Certaines des principales caractéristiques de SVG sont les suivantes:

SVG est un format d'image vectoriel basé sur du texte.
SVG a une structure similaire à HTML.
SVG peut être représenté comme un Document object model.
Les propriétés SVG peuvent être spécifiées en tant qu'attributs.
SVG doit avoir des positions absolues par rapport à l'origine (0, 0).
SVG peut être inclus tel quel dans le document HTML.

Un exemple minimal

Créons une image SVG minimale et incluons-la dans le document HTML.

Step 1 - Créez une image SVG et définissez la largeur sur 300 pixels et la hauteur sur 300 pixels.

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

</svg>

Ici le svgLa balise commence une image SVG et elle a la largeur et la hauteur comme attributs. L'unité par défaut du format SVG estpixel.

Step 2 - Créez une ligne commençant à (100, 100) et se terminant à (200, 100) et définissez la couleur rouge pour la ligne.

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

Ici le line la balise trace une ligne et ses attributs x1, y1 fait référence au point de départ et x2, y2fait référence au point final. L'attribut style définit la couleur et l'épaisseur de la ligne à l'aide dustroke et le stroke-width modes.

x1 - C'est la coordonnée x du premier point.
y1 - C'est la coordonnée y du premier point.
x2 - C'est la coordonnée x du deuxième point.
y2 - C'est la coordonnée y du deuxième point.
stroke - Couleur de la ligne.
stroke-width - Épaisseur de la ligne.

Step 3 - Créez un document HTML, «svg_line.html» et intégrez le SVG ci-dessus comme indiqué ci-dessous -

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

Le programme ci-dessus donnera le résultat suivant.

SVG avec D3.js

Pour créer SVG en utilisant D3.js, suivons les étapes ci-dessous.

Step 1 - Créez un conteneur pour contenir l'image SVG comme indiqué ci-dessous.

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

Step 2- Sélectionnez le conteneur SVG en utilisant la méthode select () et injectez l'élément SVG en utilisant la méthode append (). Ajoutez les attributs et les styles à l'aide des méthodes attr () et style ().

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

Step 3 - De même, ajoutez le line élément à l'intérieur du svg élément comme indiqué ci-dessous.

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

Le code complet est le suivant -

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

Le code ci-dessus donne le résultat suivant.

Élément Rectangle

Un rectangle est représenté par le <rect> comme indiqué ci-dessous.

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

Les attributs d'un rectangle sont les suivants -

x - Il s'agit de la coordonnée x du coin supérieur gauche du rectangle.
y - Il s'agit de la coordonnée y du coin supérieur gauche du rectangle.
width - Ceci indique la largeur du rectangle.
height - Ceci indique la hauteur du rectangle.

Un simple rectangle en SVG est défini comme expliqué ci-dessous.

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

Le même rectangle peut être créé dynamiquement comme décrit ci-dessous.

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

Le code ci-dessus donnera le résultat suivant.

Élément de cercle

Un cercle est représenté par le <circle> comme expliqué ci-dessous.

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

Les attributs du cercle sont les suivants -

cx - C'est la coordonnée x du centre du cercle.
cy - C'est la coordonnée y du centre du cercle.
r - Ceci indique le rayon du cercle.

Un simple cercle en SVG est décrit ci-dessous.

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

Le même cercle peut être créé dynamiquement comme décrit ci-dessous.

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

Le code ci-dessus donnera le résultat suivant.

Élément Ellipse

L'élément Ellipse SVG est représenté par le <ellipse> comme expliqué ci-dessous.

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

Les attributs d'une ellipse sont les suivants -

cx - C'est la coordonnée x du centre de l'ellipse.
cy - C'est la coordonnée y du centre de l'ellipse.
rx - C'est le rayon x du cercle.
ry - C'est le rayon y du cercle.

Une simple ellipse dans le SVG est décrite ci-dessous.

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

La même ellipse peut être créée dynamiquement comme ci-dessous,

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

Le code ci-dessus donnera le résultat suivant.