D3.js - API Paths

Os caminhos são usados para desenhar retângulos, círculos, elipses, polilinhas, polígonos, linhas retas e curvas. Os caminhos SVG representam o contorno de uma forma que pode ser traçada, preenchida, usada como caminho de recorte ou qualquer combinação dos três. Este capítulo explica a API Paths em detalhes.

Configurando caminhos

Você pode configurar a API Paths usando o script abaixo.

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

</script>

Métodos de API de caminhos

Alguns dos métodos da API Paths mais comumente usados são descritos resumidamente a seguir.

d3.path() - Este método é usado para criar um novo caminho.
path.moveTo(x, y) - Este método é usado para mover os valores xey especificados.
path.closePath() - Este método é usado para fechar o caminho atual.
path.lineTo(x, y) - Este método é usado para criar uma linha do ponto atual até os valores x, y definidos.
path.quadraticCurveTo(cpx, cpy, x, y) - Este método é usado para desenhar uma curva quadrática do ponto atual ao ponto especificado.
path.bezierCurveTo(cpx1, cpy1, cpx2, cpy2, x, y) - Este método é usado para desenhar uma curva de Bezier do ponto atual ao ponto especificado.
path.arcTo(x1, y1, x2, y2, radius) - Este método é usado para desenhar um arco circular do ponto atual até um ponto especificado (x1, y1) e terminar a linha entre os pontos especificados (x1, y1) e (x2, y2).
path.arc(x, y, radius, startAngle, endAngle[, anticlockwise])- Este método é usado para desenhar um arco circular para o centro especificado (x, y), raio, startAngle e endAngle. Se o valor anti-horário for verdadeiro, então o arco é desenhado no sentido anti-horário, caso contrário, ele é desenhado no sentido horário.
path.rect(x, y, w, h)- Este método é usado para criar um novo subcaminho contendo apenas os quatro pontos (x, y), (x + w, y), (x + w, y + h), (x, y + h). Com esses quatro pontos conectados por linhas retas, marca o subcaminho como fechado. Equivalente a context.rect e usa os comandos “lineto” do SVG.
path.toString() - Retorna a representação de string deste caminho de acordo com a especificação de dados de caminho do SVG.

Exemplo

Vamos desenhar uma linha simples em D3 usando a API de caminho. Crie uma página da weblinepath.html e adicione as seguintes alterações nele.

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

Agora, solicite o navegador e veremos o seguinte resultado.