D3.js-Paths API

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

パスの構成

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

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

</script>

Paths APIメソッド

最も一般的に使用されるPaths APIメソッドの一部について、以下に簡単に説明します。

* d3.path（）*-このメソッドは、新しいパスを作成するために使用されます。
* path.moveTo（x、y）*-このメソッドは、指定されたxおよびy値を移動するために使用されます。
* path.closePath（）*-このメソッドは、現在のパスを閉じるために使用されます。
* path.lineTo（x、y）*-このメソッドは、現在の点から定義されたx、y値までの線を作成するために使用されます。
* path.quadraticCurveTo（cpx、cpy、x、y）*-このメソッドは、現在の点から指定された点まで二次曲線を描くために使用されます。
* 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）、radius、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ページ linepathl を作成し、次の変更を加えます。

<!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 = [[var lineGenerator = d3.line();
         var pathString = lineGenerator(data);
         d3.select('path').attr('d', pathString);
      </script>
   </body>
</html>

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

D3js-paths-api

目次

D3.js-Paths API

パスの構成

Paths APIメソッド

例