D3.js - API Paths

I tracciati vengono utilizzati per disegnare rettangoli, cerchi, ellissi, polilinee, poligoni, linee rette e curve. I tracciati SVG rappresentano il contorno di una forma che può essere tracciata, riempita, usata come tracciato di ritaglio o qualsiasi combinazione di tutti e tre. Questo capitolo spiega in dettaglio l'API Paths.

Configurazione dei percorsi

È possibile configurare l'API Paths utilizzando lo script seguente.

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

</script>

Metodi API Paths

Alcuni dei metodi API Paths più comunemente usati sono descritti brevemente come segue.

  • d3.path() - Questo metodo viene utilizzato per creare un nuovo percorso.

  • path.moveTo(x, y) - Questo metodo viene utilizzato per spostare i valori x e y specificati.

  • path.closePath() - Questo metodo viene utilizzato per chiudere il percorso corrente.

  • path.lineTo(x, y) - Questo metodo viene utilizzato per creare una linea dal punto corrente ai valori x, y definiti.

  • path.quadraticCurveTo(cpx, cpy, x, y) - Questo metodo viene utilizzato per disegnare una curva quadratica dal punto corrente al punto specificato.

  • path.bezierCurveTo(cpx1, cpy1, cpx2, cpy2, x, y) - Questo metodo viene utilizzato per disegnare una curva di Bézier dal punto corrente al punto specificato.

  • path.arcTo(x1, y1, x2, y2, radius) - Questo metodo viene utilizzato per disegnare un arco circolare dal punto corrente a un punto specificato (x1, y1) e terminare la linea tra i punti specificati (x1, y1) e (x2, y2).

  • path.arc(x, y, radius, startAngle, endAngle[, anticlockwise])- Questo metodo viene utilizzato per disegnare un arco circolare al centro (x, y), raggio, angolo iniziale e angolo finale specificati. Se il valore antiorario è vero, l'arco viene disegnato in senso antiorario, altrimenti viene disegnato in senso orario.

  • path.rect(x, y, w, h)- Questo metodo viene utilizzato per creare un nuovo sottopercorso contenente solo i quattro punti (x, y), (x + w, y), (x + w, y + h), (x, y + h). Con questi quattro punti collegati da linee rette, contrassegna il sottotracciato come chiuso. Equivale a context.rect e utilizza i comandi "lineto" di SVG.

  • path.toString() - Restituisce la rappresentazione di stringa di questo percorso in base alla specifica dei dati del percorso di SVG.

Esempio

Tracciamo una semplice linea in D3 usando l'API del percorso. Crea una pagina weblinepath.html e aggiungi le seguenti modifiche.

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

Ora, richiedi il browser e vedremo il seguente risultato.