D3.js-パスAPI

パスは、長方形、円、楕円、ポリライン、ポリゴン、直線、および曲線を描画するために使用されます。SVGパスは、ストローク、塗りつぶし、クリッピングパスとしての使用、または3つすべての任意の組み合わせが可能なシェイプのアウトラインを表します。この章では、PathsAPIについて詳しく説明します。

パスの構成

以下のスクリプトを使用して、PathsAPIを構成できます。

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

</script>

パスAPIメソッド

最も一般的に使用されるPathsAPIメソッドのいくつかを以下に簡単に説明します。

d3.path() −このメソッドは、新しいパスを作成するために使用されます。
path.moveTo(x, y) −このメソッドは、指定されたx値とy値を移動するために使用されます。
path.closePath() −このメソッドは、現在のパスを閉じるために使用されます。
path.lineTo(x, y) −このメソッドは、現在のポイントから定義されたx、y値までの線を作成するために使用されます。
path.quadraticCurveTo(cpx, cpy, x, y) −この方法は、現在のポイントから指定されたポイントまで2次曲線を描くために使用されます。
path.bezierCurveTo(cpx1, cpy1, cpx2, cpy2, x, y) −この方法は、現在のポイントから指定されたポイントまでベジェ曲線を描くために使用されます。
path.arcTo(x1, y1, x2, y2, radius) −この方法は、現在の点から指定された点（x1、y1）まで円弧を描き、指定された点（x1、y1）と（x2、y2）の間の線を終了するために使用されます。
path.arc(x, y, radius, startAngle, endAngle[, anticlockwise])−このメソッドは、指定された中心（x、y）、半径、startAngle、およびendAngleに円弧を描画するために使用されます。反時計回りの値がtrueの場合、円弧は反時計回りの方向に描画されます。それ以外の場合、円弧は時計回りの方向に描画されます。
path.rect(x, y, w, h)−このメソッドは、4つのポイント（x、y）、（x + w、y）、（x + w、y + h）、（x、y + h）のみを含む新しいサブパスを作成するために使用されます。これらの4つのポイントが直線で接続されている場合、サブパスは閉じているとマークされます。context.rectと同等であり、SVGの「lineto」コマンドを使用します。
path.toString() − SVGのパスデータ仕様に従って、このパスの文字列表現を返します。

例

パスAPIを使用してD3に簡単な線を引きましょう。Webページを作成するlinepath.html 次の変更を追加します。

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

ここで、ブラウザをリクエストすると、次の結果が表示されます。