📌  相关文章
📜  D3.js-路径API

📅  最后修改于: 2020-10-26 06:11:54             🧑  作者: Mango

路径用于绘制矩形，圆形，椭圆形，折线，多边形，直线和曲线。 SVG路径表示可以被抚摸，填充，用作剪切路径或这三者的任意组合的形状的轮廓。本章将详细说明Paths API。

配置路径

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

路径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，半径） -此方法用于绘制从当前点到指定点（x1，y1）的圆弧并在指定点（x1，y1）之间结束线和（x2，y2）。

  • path.arc（x，y，radius，startAngle，endAngle [，逆时针]） -此方法用于将圆弧绘制到指定的中心（x，y），radius，startAngle和endAngle。如果逆时针值为true，则沿逆时针方向绘制弧，否则沿顺时针方向绘制弧。

  • 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并在其中添加以下更改。

现场演示

   
      SVG path line Generator

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