D3 · all subjects

d3-path

13 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

d3-path module overview

d3-path serializes Canvas path commands to SVG path data strings. It provides path creation with methods for moveTo, closePath, lineTo, quadraticCurveTo, bezierCurveTo, arcTo, arc, and rect, plus pathRound for fixed precision output.

d3-path path drawing methods

Path drawing methods: path.moveTo (move to point), path.closePath (close subpath), path.lineTo (draw line segment), path.quadraticCurveTo (draw quadratic Bézier segment), path.bezierCurveTo (draw cubic Bézier segment), path.arcTo (draw circular arc segment), path.arc (draw circular arc segment), path.rect (draw rectangle), path.toString (serialize to SVG path data string).

d3.path() constructor

Constructs a new path serializer that implements CanvasPathMethods. It serializes CanvasPathMethods calls to SVG path data, allowing the same code to render to both Canvas and SVG.

path.moveTo(x, y) signature

Moves to the specified point ⟨x, y⟩. Equivalent to context.moveTo and SVG's moveto command.

path.closePath() signature

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.

path.lineTo(x, y) signature

Draws a straight line from the current point to the specified point ⟨x, y⟩. Equivalent to context.lineTo and SVG's lineto command.

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

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.

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

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.

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

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.

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

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.

path.toString() signature

Returns the string representation of this path according to SVG's path data specification.

d3.pathRound(digits) constructor

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. Default digits is 3.

d3-path Canvas to SVG serialization example

This example shows how d3-path serializes Canvas calls to SVG path data: ```js function drawCircle(context, radius) { context.moveTo(radius, 0); context.arc(0, 0, radius, 0, 2 * Math.PI); } const path = d3.path(); drawCircle(path, 40); path.toString(); // "M40,0A40,40,0,1,1,-40,0A40,40,0,1,1,40,0" ```

Give your agent this brain