D3

d3-path ​

示例 · 假设你有一些在 2D 画布上绘制的代码：

¥Examples · Say you have some code that draws to a 2D canvas:

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

d3-path 模块允许你使用此代码，并额外渲染到 SVG。它通过 serializing、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 的新路径序列化器。

¥Source · Constructs a new path serializer that implements CanvasPathMethods.

path.moveTo(x, y) {#path_moveTo} ​

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

¥Source · Move to the specified point ⟨x, y⟩. Equivalent to context.moveTo and SVG’s “moveto” command.

js
path.moveTo(100, 100);

path.closePath() {#path_closePath} ​

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

¥Source · Ends the current subpath and causes an automatic straight line to be drawn from the current point to the initial point of the current subpath. Equivalent to context.closePath and SVG’s “closepath” command.

js
path.closePath();

path.lineTo(x, y) {#path_lineTo} ​

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

¥Source · Draws a straight line from the current point to the specified point ⟨x, y⟩. Equivalent to context.lineTo and SVG’s “lineto” command.

js
path.lineTo(200, 200);

path.quadraticCurveTo(cpx, cpy, x, y) {#path_quadraticCurveTo} ​

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

¥Source · Draws a quadratic Bézier segment from the current point to the specified point ⟨x, y⟩, with the specified control point ⟨cpx, cpy⟩. Equivalent to context.quadraticCurveTo and SVG’s quadratic Bézier curve commands.

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

path.bezierCurveTo(cpx1, cpy1, cpx2, cpy2, x, y) {#path_bezierCurveTo} ​

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

¥Source · Draws a cubic Bézier segment from the current point to the specified point ⟨x, y⟩, with the specified control points ⟨cpx1, cpy1⟩ and ⟨cpx2, cpy2⟩. Equivalent to context.bezierCurveTo and SVG’s cubic Bézier curve commands.

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

path.arcTo(x1, y1, x2, y2, radius) {#path_arcTo} ​

源代码 · 绘制一个具有指定半径的圆弧段，该圆弧段起始于当前点与指定点 ⟨x1, y1⟩ 之间的连线的切线，终止于指定点 ⟨x1, y1⟩ 和 ⟨x2, y2⟩ 之间的连线的切线。如果第一个切点不等于当前点，则在当前点和第一个切点之间绘制一条直线。相当于 context.arcTo 并使用 SVG 的 椭圆弧曲线命令。

¥Source · Draws a circular arc segment with the specified radius that starts tangent to the line between the current point and the specified point ⟨x1, y1⟩ and ends tangent to the line between the specified points ⟨x1, y1⟩ and ⟨x2, y2⟩. If the first tangent point is not equal to the current point, a straight line is drawn between the current point and the first tangent point. Equivalent to context.arcTo and uses SVG’s elliptical arc curve commands.

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

path.arc(x, y, radius, startAngle, endAngle, anticlockwise) {#path_arc} ​

源代码 · 绘制一个具有指定圆心 ⟨x, y⟩、半径、起始角度和结束角度的圆弧段。如果逆时针为真，则圆弧将以逆时针方向绘制；否则，按顺时针方向绘制。如果当前点不等于圆弧的起点，则从当前点到圆弧的起点绘制一条直线。相当于 context.arc 并使用 SVG 的 椭圆弧曲线命令。

¥Source · Draws a circular arc segment with the specified center ⟨x, y⟩, radius, startAngle and endAngle. If anticlockwise is true, the arc is drawn in the anticlockwise direction; otherwise, it is drawn in the clockwise direction. If the current point is not equal to the starting point of the arc, a straight line is drawn from the current point to the start of the arc. Equivalent to context.arc and uses SVG’s elliptical arc curve commands.

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

path.rect(x, y, w, h) {#path_rect} ​

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

¥Source · Creates a new subpath containing just the four points ⟨x, y⟩, ⟨x + w, y⟩, ⟨x + w, y + h⟩, ⟨x, y + h⟩, with those four points connected by straight lines, and then marks the subpath as closed. Equivalent to context.rect and uses SVG’s “lineto” commands.

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

path.toString() {#path_toString} ​

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

¥Source · Returns the string representation of this path according to SVG’s path data specification.

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

pathRound(digits = 3) ​

源代码 · 与 path 类似，但将小数点后的数字限制为指定的位数。Useful for reducing the size of generated SVG path data.

¥Source · Like path, except limits the digits after the decimal to the specified number of digits. Useful for reducing the size of generated SVG path data.

js
const path = d3.pathRound(3);