D3.js - Paths API

路径用于绘制矩形,圆形,椭圆形,折线,多边形,直线和曲线。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>

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