D3.js - Paths API

D3.js Paths API - 从简单和简单的步骤学习D3.js，从基本到高级概念，包括简介，安装，概念，选择，数据连接，SVG简介，SVG转换，转换，动画，绘图，图表，地理位置，数组，集合，选择，路径，尺度，轴，形状，颜色，过渡，拖动，缩放，请求，分隔符分隔值，计时器API，工作示例。

路径用于绘制矩形，圆形，椭圆形，折线，多边形，直线和曲线. SVG路径表示可以描边，填充，用作剪切路径或三者的任意组合的形状轮廓.本章详细介绍了Paths API.

配置路径

您可以使用下面的脚本配置Paths API.

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

一些最常用的路径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 并在其中添加以下更改.

         SVG path line Generator

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