D3.js - API Paths

Les chemins sont utilisés pour dessiner des rectangles, des cercles, des ellipses, des polylignes, des polygones, des lignes droites et des courbes. Les chemins SVG représentent le contour d'une forme qui peut être tracé, rempli, utilisé comme chemin de détourage ou toute combinaison des trois. Ce chapitre explique en détail l'API Paths.

Configurer les chemins

Vous pouvez configurer l'API Paths à l'aide du script ci-dessous.

<script src = "https://d3js.org/d3-path.v1.min.js"></script>
<script>

</script>

Méthodes API Paths

Certaines des méthodes API Paths les plus couramment utilisées sont brièvement décrites ci-dessous.

d3.path() - Cette méthode est utilisée pour créer un nouveau chemin.
path.moveTo(x, y) - Cette méthode est utilisée pour déplacer les valeurs x et y spécifiées.
path.closePath() - Cette méthode est utilisée pour fermer le chemin actuel.
path.lineTo(x, y) - Cette méthode est utilisée pour créer une ligne entre le point courant et les valeurs x, y définies.
path.quadraticCurveTo(cpx, cpy, x, y) - Cette méthode est utilisée pour dessiner une courbe quadratique du point courant au point spécifié.
path.bezierCurveTo(cpx1, cpy1, cpx2, cpy2, x, y) - Cette méthode est utilisée pour dessiner une courbe de Bézier du point actuel au point spécifié.
path.arcTo(x1, y1, x2, y2, radius) - Cette méthode est utilisée pour dessiner un arc de cercle du point courant à un point spécifié (x1, y1) et terminer la ligne entre les points spécifiés (x1, y1) et (x2, y2).
path.arc(x, y, radius, startAngle, endAngle[, anticlockwise])- Cette méthode est utilisée pour dessiner un arc de cercle vers le centre (x, y), le rayon, le startAngle et endAngle spécifiés. Si la valeur anti-horaire est vraie, l'arc est dessiné dans le sens anti-horaire, sinon il est dessiné dans le sens horaire.
path.rect(x, y, w, h)- Cette méthode est utilisée pour créer un nouveau sous-chemin contenant uniquement les quatre points (x, y), (x + w, y), (x + w, y + h), (x, y + h). Avec ces quatre points reliés par des lignes droites, le sous-chemin est marqué comme fermé. Équivaut à context.rect et utilise les commandes «lineto» de SVG.
path.toString() - Renvoie la représentation sous forme de chaîne de ce chemin conformément à la spécification des données de chemin de SVG.

Exemple

Trouvons une ligne simple dans D3 en utilisant l'API de chemin. Créer une page Weblinepath.html et ajoutez-y les modifications suivantes.

<!DOCTYPE html>
<meta charset = "UTF-8">
   <head>
      <title>SVG path line Generator</title>
   </head>

   <style>
      path {
         fill: green;
         stroke: #aaa;
      }
   </style>
   
   <body>
      <svg width = "600" height = "100">
         <path transform = "translate(200, 0)" />
      </svg>
      
      <script src = "https://d3js.org/d3.v4.min.js"></script>
      <script>
         var data = [[0, 20], [50, 30], [100, 50], [200, 60], [300, 90]];
         var lineGenerator = d3.line();
         var pathString = lineGenerator(data);
         d3.select('path').attr('d', pathString);
      </script>
   </body>
</html>

Maintenant, demandez le navigateur et nous verrons le résultat suivant.