D3.js - 路徑 API

路徑用於繪製矩形、圓形、橢圓、折線、多邊形、直線和曲線。SVG 路徑表示可以進行描邊、填充、用作剪下路徑或所有三種組合的形狀輪廓。本章詳細解釋了路徑 API。

配置路徑

您可以使用以下指令碼配置路徑 API。

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

</script>

路徑 API 方法

一些最常用的路徑 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)、半徑、起始角度和結束角度。如果 anticlockwise 值為真，則圓弧沿逆時針方向繪製，否則沿順時針方向繪製。
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>

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

列印頁面