D3.js: API de rutas

Los trazados se utilizan para dibujar rectángulos, círculos, elipses, polilíneas, polígonos, líneas rectas y curvas. Los trazados SVG representan el contorno de una forma que se puede trazar, rellenar, utilizar como trazado de recorte o cualquier combinación de los tres. Este capítulo explica la API de rutas en detalle.

Configurar rutas

Puede configurar la API de rutas utilizando el siguiente script.

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

</script>

Métodos de la API de rutas

A continuación se describen brevemente algunos de los métodos de la API Paths más utilizados.

d3.path() - Este método se utiliza para crear una nueva ruta.
path.moveTo(x, y) - Este método se utiliza para mover los valores xey especificados.
path.closePath() - Este método se utiliza para cerrar la ruta actual.
path.lineTo(x, y) - Este método se utiliza para crear una línea desde el punto actual hasta los valores x, y definidos.
path.quadraticCurveTo(cpx, cpy, x, y) - Este método se utiliza para dibujar una curva cuadrática desde el punto actual hasta el punto especificado.
path.bezierCurveTo(cpx1, cpy1, cpx2, cpy2, x, y) - Este método se utiliza para dibujar una curva Bézier desde el punto actual hasta el punto especificado.
path.arcTo(x1, y1, x2, y2, radius) - Este método se utiliza para dibujar un arco circular desde el punto actual hasta un punto especificado (x1, y1) y finalizar la línea entre los puntos especificados (x1, y1) y (x2, y2).
path.arc(x, y, radius, startAngle, endAngle[, anticlockwise])- Este método se utiliza para dibujar un arco circular hacia el centro especificado (x, y), radio, startAngle y endAngle. Si el valor en sentido antihorario es verdadero, entonces el arco se dibuja en sentido antihorario; de lo contrario, se dibuja en sentido horario.
path.rect(x, y, w, h)- Este método se utiliza para crear una nueva ruta secundaria que contiene solo los cuatro puntos (x, y), (x + w, y), (x + w, y + h), (x, y + h). Con estos cuatro puntos conectados por líneas rectas, marca el subtrayecto como cerrado. Equivalente a context.rect y utiliza los comandos "lineto" de SVG.
path.toString() - Devuelve la representación de cadena de esta ruta de acuerdo con la especificación de datos de ruta de SVG.

Ejemplo

Dibujemos una línea simple en D3 usando la ruta API. Crea una pagina weblinepath.html y agregue los siguientes cambios en él.

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

Ahora, solicita el navegador y veremos el siguiente resultado.

↰ Previous page Next page ↱