D3.js - Pfad-API

Pfade werden zum Zeichnen von Rechtecken, Kreisen, Ellipsen, Polylinien, Polygonen, geraden Linien und Kurven verwendet. SVG-Pfade stellen den Umriss einer Form dar, die gestrichen, gefüllt, als Beschneidungspfad oder in einer beliebigen Kombination aller drei verwendet werden kann. In diesem Kapitel wird die Pfad-API ausführlich erläutert.

Pfade konfigurieren

Sie können die Pfad-API mithilfe des folgenden Skripts konfigurieren.

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

</script>

Pfad-API-Methoden

Einige der am häufigsten verwendeten Paths-API-Methoden werden im Folgenden kurz beschrieben.

d3.path() - Mit dieser Methode wird ein neuer Pfad erstellt.
path.moveTo(x, y) - Mit dieser Methode werden die angegebenen x- und y-Werte verschoben.
path.closePath() - Mit dieser Methode wird der aktuelle Pfad geschlossen.
path.lineTo(x, y) - Mit dieser Methode wird eine Linie vom aktuellen Punkt zu definierten x, y-Werten erstellt.
path.quadraticCurveTo(cpx, cpy, x, y) - Mit dieser Methode wird eine quadratische Kurve vom aktuellen Punkt zum angegebenen Punkt gezeichnet.
path.bezierCurveTo(cpx1, cpy1, cpx2, cpy2, x, y) - Mit dieser Methode wird eine Bezierkurve vom aktuellen Punkt zum angegebenen Punkt gezeichnet.
path.arcTo(x1, y1, x2, y2, radius) - Mit dieser Methode wird ein Kreisbogen vom aktuellen Punkt zu einem bestimmten Punkt (x1, y1) gezeichnet und die Linie zwischen den angegebenen Punkten (x1, y1) und (x2, y2) beendet.
path.arc(x, y, radius, startAngle, endAngle[, anticlockwise])- Mit dieser Methode wird ein Kreisbogen zum angegebenen Mittelpunkt (x, y), Radius, Startwinkel und Endwinkel gezeichnet. Wenn der Wert gegen den Uhrzeigersinn wahr ist, wird der Bogen gegen den Uhrzeigersinn gezeichnet, andernfalls wird er im Uhrzeigersinn gezeichnet.
path.rect(x, y, w, h)- Mit dieser Methode wird ein neuer Unterpfad erstellt, der nur die vier Punkte (x, y), (x + w, y), (x + w, y + h), (x, y + h) enthält. Mit diesen vier durch gerade Linien verbundenen Punkten wird der Unterpfad als geschlossen markiert. Entspricht context.rect und verwendet die "lineto" -Befehle von SVG.
path.toString() - Gibt die Zeichenfolgendarstellung dieses Pfads gemäß der Pfaddatenspezifikation von SVG zurück.

Beispiel

Zeichnen wir in D3 mithilfe der Pfad-API eine einfache Linie. Erstellen Sie eine Webseitelinepath.html und fügen Sie die folgenden Änderungen hinzu.

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

Fordern Sie jetzt den Browser an und wir werden das folgende Ergebnis sehen.