D3.js - Paths API

Created: November-04, 2018

路徑用於繪製矩形，圓形，橢圓形，折線，多邊形，直線和曲線。SVG 路徑表示可以描邊，填充，用作剪下路徑或三者的任意組合的形狀輪廓。本章詳細介紹了 Paths API。

配置路徑

你可以使用下面的指令碼配置 Paths API。

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

</script>

路徑 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），半徑，startAngle 和 endAngle。如果逆時針值為真，則沿逆時針方向繪製圓弧，否則沿順時針方向繪製圓弧。
path.rect(x，y，w，h) - 此方法用於建立僅包含四個點（x，y），（x + w，y），（x + w，y + h）的新子路徑，（x，y + h）。通過這些由直線連線的四個點將子路徑標記為閉合。相當於 context.rect 並使用 SVG 的 lineto 命令。
path.toString() - 根據 SVG 的路徑資料規範返回此路徑的字串表示形式。

例

讓我們使用路徑 API 在 D3 中繪製一條簡單的線。建立一個網頁 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>

現在，請求瀏覽器，我們將看到以下結果。