d3-path

示例 · 假设你有一些代码绘制到二维画布上

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

d3-path 模块允许你使用这段相同的代码，并额外渲染到 SVG。它的工作原理是 序列化 CanvasPathMethods 调用到 SVG 路径数据。例如

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。

path()

源代码 · 构造一个新的路径序列化器，它实现 CanvasPathMethods。

path.moveTo(x, y)

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

path.moveTo(100, 100);

path.closePath()

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

path.closePath();

path.lineTo(x, y)

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

path.lineTo(200, 200);

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

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

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

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

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

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

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

源代码 · 使用指定的 radius 绘制一个圆形弧段，该弧段从当前点到指定点 ⟨x1, y1⟩ 之间的直线相切开始，到指定点 ⟨x1, y1⟩ 和 ⟨x2, y2⟩ 之间的直线相切结束。如果第一个切点不等于当前点，则从当前点绘制一条直线到第一个切点。等同于 context.arcTo，并使用 SVG 的 椭圆弧曲线命令。

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 的 椭圆弧曲线命令。

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” 命令。

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

path.toString()

源代码 · 根据 SVG 的 路径数据规范 返回此 path 的字符串表示形式。

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

pathRound(digits = 3)

源代码 · 与 path 相似，但将小数点后的位数限制为指定的 digits 个。这对于减小生成的 SVG 路径数据的大小很有用。

const path = d3.pathRound(3);