D3

d3-path ​

示例 · 假设你有一些代码可以在二维画布上绘图：

js
function drawCircle(context, radius) {
  context.moveTo(radius, 0);
  context.arc(0, 0, radius, 0, 2 * Math.PI);
}

d3-path 模块让你可以使用这段完全相同的代码，并且额外渲染到 SVG。它的工作原理是将 CanvasPathMethods 调用 序列化 为 SVG 路径数据。例如：

🌐 The d3-path module lets you take this exact code and additionally render to SVG. It works by serializing CanvasPathMethods calls to SVG path data. For example:

js
const path = d3.path();
drawCircle(path, 40);
path.toString(); // "M40,0A40,40,0,1,1,-40,0A40,40,0,1,1,40,0"

现在你编写的代码一次就可以同时用于 Canvas（为了性能）和 SVG（为了方便）。有关实际示例，请参见 d3-shape。

🌐 Now code you write once can be used with both Canvas (for performance) and SVG (for convenience). For a practical example, see d3-shape.

path() ​

来源 · 构建一个新的路径序列化器，该序列化器实现了 CanvasPathMethods。

path.moveTo(x, y) ​

来源 · 移动到指定点 ⟨x, y⟩。等同于 context.moveTo 和 SVG 的 “mov动到”命令。

js
path.moveTo(100, 100);

path.closePath() ​

来源 · 结束当前子路径，并自动从当前点绘制一条直线到当前子路径的起始点。等同于 context.closePath 和 SVG 的 “closepath” 命令。

js
path.closePath();

path.lineTo(x, y) ​

来源 · 从当前点绘制一条直线到指定点 ⟨x，y⟩。相当于 context.lineTo 和 SVG 的 “lineto” 命令。

js
path.lineTo(200, 200);

path.quadraticCurveTo(cpx, cpy, x, y) ​

源 · 从当前点绘制一条二次贝塞尔曲线段到指定点 ⟨x, y⟩，使用指定的控制点 ⟨cpx, cpy⟩。等同于 context.quadraticCurveTo 和 SVG 的 二次贝塞尔曲线命令。

js
path.quadraticCurveTo(200, 0, 200, 200);

path.bezierCurveTo(cpx1, cpy1, cpx2, cpy2, x, y) ​

来源 · 从当前点绘制一段三次贝塞尔曲线到指定点 ⟨x, y⟩，使用指定的控制点 ⟨cpx1, cpy1⟩ 和 ⟨cpx2, cpy2⟩。等同于 context.bezierCurveTo 以及 SVG 的 三次贝塞尔曲线命令。

js
path.bezierCurveTo(200, 0, 0, 200, 200, 200);

path.arcTo(x1, y1, x2, y2, radius) ​

[来源]（https://github.com/d3/d3-path/blob/main/src/path.js） ·绘制一个圆弧段，其半径为指定*，起始于当前点与指定点之间的直线⟨x1， y1⟩，终止于指定点⟨x1， y1⟩和⟨x2， y2⟩之间的直线。如果第一个切点与当前点不相等，则在当前点与第一个切点之间画一条直线。相当于 [context.arcTo]（http://www.w3.org/TR/2dcontext/#dom-context-2d-arcto），并使用 SVG 的 [椭圆弧曲线命令]（http://www.w3.org/TR/SVG/paths.html#PathDataEllipticalArcCommands）。

js
path.arcTo(150, 150, 300, 10, 40);

path.arc(x, y, radius, startAngle, endAngle, anticlockwise) ​

来源 · 绘制以指定中心 ⟨x, y⟩、radius、startAngle 和 endAngle 的圆弧段。如果 anticlockwise 为 true，则沿逆时针方向绘制圆弧；否则沿顺时针方向绘制圆弧。如果当前点不等于圆弧的起点，将从当前点绘制一条直线到圆弧的起点。等同于 context.arc 并使用 SVG 的 椭圆弧曲线命令。

js
path.arc(80, 80, 70, 0, Math.PI * 2);

path.rect(x, y, w, h) ​

来源 · 创建一个新的子路径，仅包含四个点 ⟨x, y⟩、⟨x + w, y⟩、⟨x + w, y + h⟩、⟨x, y + h⟩，这四个点通过直线连接，然后将子路径标记为闭合。等同于 context.rect 并使用 SVG 的 “lineto” 命令。

js
path.rect(10, 10, 140, 140);

path.toString() ​

来源 · 根据 SVG 的 路径数据规范 返回此 路径 的字符串表示。

js
path.toString() // "M40,0A40,40,0,1,1,-40,0A40,40,0,1,1,40,0"

pathRound(digits = 3) ​

来源 · 类似 路径，但将小数点后的数字限制为指定的 位数。对于减小生成的 SVG 路径数据的大小很有用。

js
const path = d3.pathRound(3);