d3.js 路径（path） api——迹忆客-ag捕鱼王app官网

路径用于绘制矩形、圆形、椭圆、折线、多边形、直线和曲线。svg 路径表示可以被描边、填充、用作剪切路径或所有三者的任意组合的形状的轮廓。本章详细介绍 path 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, radius) - 此方法用于绘制从当前点到指定点 (x1, y1) 的圆弧并结束指定点 (x1, y1) 之间的线和 (x2, y2)。
• path.arc(x, y, radius, startangle, endangle[, anticlock]) - 此方法用于绘制圆弧到指定的中心 (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并在其中添加以下更改。