D3.js - Transformation SVG

SVG fournit des options pour transformer un seul élément de forme SVG ou un groupe d'éléments SVG. Prise en charge de la transformation SVGTranslate, Scale, Rotate et Skew. Apprenons la transformation dans ce chapitre.

Introduction à la transformation SVG

SVG introduit un nouvel attribut, transformpour accompagner la transformation. Les valeurs possibles sont une ou plusieurs des valeurs suivantes,

Translate - Il faut deux options, tx fait référence à la translation le long de l'axe des x et tyfait référence à la translation le long de l'axe y. PourExample- traduire (30 30).
Rotate - Il faut trois options, angle fait référence à l'angle de rotation, cx et cyfait référence au centre de la rotation sur les axes x et y. Sicx et cyne sont pas spécifiés, il prend par défaut l'origine courante du système de coordonnées. PourExample - tourner (60).
Scale - Il faut deux options, sx fait référence au facteur d'échelle le long de l'axe des x et syfait référence au facteur d'échelle le long de l'axe y. Ici,sy est facultatif et prend la valeur de sx, s'il n'est pas spécifié. PourExample - échelle (10).
Skew (SkewX and SkewY)- Cela prend une seule option; laskew-anglefait référence à l'angle le long de l'axe des x pour SkewX et à l'angle le long de l'axe des y pour SkewY. PourExample - skewx (20).

Un exemple de rectangle SVG avec translate, qui est décrit comme suit -

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

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

Plus d'une transformation peut être spécifiée pour un seul élément SVG en utilisant l'espace comme séparation. Si plus d'une valeur est spécifiée, la transformation sera appliquée une par une séquentiellement dans l'ordre spécifié.

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

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

La transformation peut également être appliquée à l'élément de groupe SVG. Cela permet de transformer des graphiques complexes définis dans le SVG comme décrit ci-dessous.

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

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

Un exemple minimal

Pour créer une image SVG, essayez de la mettre à l'échelle et de la faire pivoter à l'aide de la transformation, suivons les étapes ci-dessous.

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>

Step 2 - Créez un groupe SVG.

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

Step 3 - Créez un rectangle de longueur 60 et hauteur 30 et remplissez-le de couleur verte.

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

Step 4 - Créez un cercle de rayon 30 et remplissez-le de couleur rouge.

<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 - Ajoutez un attribut de transformation et ajoutez la traduction et la rotation comme indiqué ci-dessous.

<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 - Créez un document HTML, «svg_transform_rotate_group.html» et intégrez le SVG ci-dessus comme expliqué 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">
            <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>

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

Transformation à l'aide de 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 expliqué ci-dessous.

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

Step 2 - Créez une image SVG comme expliqué ci-dessous.

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

Step 3 - Créez un élément de groupe SVG et définissez les attributs de translation et de rotation.

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

Step 4 - Créez un rectangle SVG et ajoutez-le à l'intérieur du groupe.

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

Step 5 - Créez un cercle SVG et ajoutez-le à l'intérieur du groupe.

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

Le code complet est le suivant -

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

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

Transformer la bibliothèque

D3.js fournit une bibliothèque distincte pour gérer la transformation sans créer manuellement les attributs de transformation. Il fournit des méthodes pour gérer tous les types de transformation. Certaines des méthodes sonttransform(), translate(), scale(), rotate(), etc. Vous pouvez inclure d3-transform dans votre page Web à l'aide du script suivant.

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

Dans l'exemple ci-dessus, le code de transformation peut être écrit comme indiqué ci-dessous -

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

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

↰ Previous page Next page ↱

D3.js - Transformation SVG

Introduction à la transformation SVG

Un exemple minimal

Transformation à l'aide de D3.js

Transformer la bibliothèque

Tutoriel D3.js