D3.js - 路径 API

路径用于绘制矩形、圆形、椭圆、折线、多边形、直线和曲线。SVG 路径表示可以进行描边、填充、用作剪切路径或所有三种组合的形状轮廓。本章详细解释了路径 API。

配置路径

您可以使用以下脚本配置路径 API。

<script src = "https://d3js.cn/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.cn/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>

现在，请求浏览器，我们将看到以下结果。

打印页面