30:T944,## Complete API The following methods are listed in d3-path’s [API documentation](https://d3js.org/d3-path#path). This table summarizes how d3.path translates Canvas commands to SVG path commands. | Canvas | SVG | Description | |------------------|------------|-------------| | [moveTo](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/moveTo) | [M](https://www.w3.org/TR/SVG/paths.html#PathDataMovetoCommands) | move to the given coordinates | | [closePath](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/closePath) | [Z](https://www.w3.org/TR/SVG/paths.html#PathDataClosePathCommand) | draw a line to the start of the current sub-path | | [lineTo](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineTo) | [L](https://www.w3.org/TR/SVG/paths.html#PathDataLinetoCommands) | draw a line | | [quadraticCurveTo](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/quadraticCurveTo) | [Q](https://www.w3.org/TR/SVG/paths.html#PathDataQuadraticBezierCommands) | draw a quadratic Bézier curve | | [bezierCurveTo](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/bezierCurveTo) | [C](https://www.w3.org/TR/SVG/paths.html#PathDataCubicBezierCommands) | draw a cubic Bézier curve | | [arcTo](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/arcTo) | [M](https://www.w3.org/TR/SVG/paths.html#PathDataMovetoCommands), [L](https://www.w3.org/TR/SVG/paths.html#PathDataLinetoCommands), [A](https://www.w3.org/TR/SVG/paths.html#PathDataEllipticalArcCommands) | draw a circular arc (and possibly line) | | [arc](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/arc) | [M](https://www.w3.org/TR/SVG/paths.html#PathDataMovetoCommands), [L](https://www.w3.org/TR/SVG/paths.html#PathDataLinetoCommands), [A](https://www.w3.org/TR/SVG/paths.html#PathDataEllipticalArcCommands) | draw a circular arc | | [rect](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/rect) | [M](https://www.w3.org/TR/SVG/paths.html#PathDataMovetoCommands), [h](https://www.w3.org/TR/SVG/paths.html#PathDataLinetoCommands), [v](https://www.w3.org/TR/SVG/paths.html#PathDataLinetoCommands), [Z](https://www.w3.org/TR/SVG/paths.html#PathDataClosePathCommand) | draw a axis-aligned rectangle |31:T5fe,{ const path = d3.path(), x0 = 310, y0 = 130, x = 120, y = 120, radius = 100, startAngle = 0, endAngle = 2 * Math.PI - 1, moveto00 = arcOptions?.includes("moveTo"), anticlockwise = arcOptions?.includes("anticlockwise"); const chart = svg``; const points = [ [x + radius * Math.cos(startAngle), y + radius * Math.sin(startAngle)], [+radius * Math.cos(endAngle), y + radius * Math.sin(endAngle)] ], labels = ["startAngle", "endAngle"], lines = [], draw = () => { const startAngle = Math.atan2(points[0][1] - x, points[0][0] - y), endAngle = Math.atan2(points[1][1] - x, points[1][0] - y), radius = Math.sqrt((points[0][1] - x) ** 2 + (points[0][0] - y) ** 2); points[0][0] = x + radius * Math.cos(startAngle); points[0][1] = x + radius * Math.sin(startAngle); points[1][0] = x + radius * Math.cos(endAngle); points[1][1] = x + radius * Math.sin(endAngle); const path = d3.path(); if (moveto00) path.moveTo(...points[2]); path.arc(x, y, radius, startAngle, endAngle, anticlockwise); return path; }; if (moveto00) { points.push([x0, y0]); labels.push("⟨x0, y0⟩"); } draggable(chart, points, labels, lines, draw); return chart; }32:T540,function draggable(chart, points, labels, lines, draw) { update(chart, points, labels, lines, draw); const dist = (p, m) => { return Math.sqrt((p[0] - m[0]) ** 2 + (p[1] - m[1]) ** 2); }; var subject, dx, dy; function dragSubject(event) { const p = d3.pointer(event.sourceEvent, chart); subject = d3.least(points, (a, b) => dist(p, a) - dist(p, b)); if (dist(p, subject) > 48) subject = null; if (subject) d3.select(chart) .style("cursor", "hand") .style("cursor", "grab"); else d3.select(chart).style("cursor", null); return subject; } d3.select(chart) .on("mousemove", event => dragSubject({sourceEvent: event})) .call( d3 .drag() .subject(dragSubject) .on("start", event => { if (subject) { d3.select(chart).style("cursor", "grabbing"); dx = subject[0] - event.x; dy = subject[1] - event.y; } }) .on("drag", event => { if (subject) { subject[0] = event.x + dx; subject[1] = event.y + dy; } }) .on("end", () => { d3.select(chart).style("cursor", "grab"); }) .on("start.render drag.render end.render", () => update(chart, points, labels, lines, draw) ) ); }33:[] 2e:{"title":"d3.path","cells":[{"id":646,"value":"# d3.path\n\n[d3.path](https://d3js.org/d3-path) returns an object that implements the same path methods as a Canvas 2D context, but serializes them into SVG path data. With this, any program that consists of “turtle” commands can be applied to SVG as well as Canvas.","pinned":false,"hidden":false,"mode":"md"},{"id":690,"value":"{\n const chart = svg``;\n\n // return chart;\n\n /**\n * Add control elements and prepare interactions\n */\n const points = [\n [20, 20],\n [40, 120],\n [60, 160],\n [350, 50],\n [150, 280],\n [150, 30]\n ],\n labels = [\n \"moveTo\",\n \"lineTo\",\n \"moveTo\",\n \"bezierCurveTo\",\n \"⟨control1⟩\",\n \"⟨control2⟩\"\n ],\n lines = [],\n draw = () => {\n const path = d3.path();\n path.moveTo(...points[0]);\n path.lineTo(...points[1]);\n path.moveTo(...points[2]);\n path.bezierCurveTo(...points[4], ...points[5], ...points[3]);\n return path;\n };\n\n draggable(chart, points, labels, lines, draw);\n\n return chart;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":0,"value":"The “turtle” commands are a subset of the [Canvas 2D context API](https://developer.mozilla.org/en/docs/Web/API/CanvasRenderingContext2D), specifically the [CanvasPathMethods](https://www.w3.org/TR/2dcontext/#canvaspathmethods) interface, which move a pen and apply it to create path segments (*context*.moveTo, *context*.lineTo, *etc.*). They do not include any notion of the path’s appearance; stroke, fill, clip, colors, and transforms such as rotate are handled in Canvas by methods such as *context*.stroke, and in SVG by attributes such as stroke and fill.","pinned":false,"hidden":false,"mode":"md"},{"id":789,"value":"d3.path is used internally by D3’s various visual rendering methods (d3-shape, d3-geo *etc.*), but it can also be used directly. For example, suppose we have a drawing function meant for a Canvas 2D context:","pinned":false,"hidden":false,"mode":"md"},{"id":7,"value":"function draw(context) {\n context.moveTo(10, 10); // move current point to ⟨10,10⟩\n context.lineTo(100, 10); // draw straight line to ⟨100,10⟩\n context.arcTo(150, 150, 300, 10, 40); // draw an arc, the turtle ends up at ⟨194.4,108.5⟩\n context.lineTo(300, 10); // draw straight line to ⟨300,10⟩\n // etc.\n return context; // not mandatory, but will make it easier to chain operations\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":639,"value":"We can call this function with a 2D context and draw it on canvas:","pinned":false,"hidden":false,"mode":"md"},{"id":13,"value":"{\n const context = DOM.context2d(width, 150);\n context.beginPath();\n draw(context);\n context.stroke();\n return context.canvas;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":243,"value":"But we can pass the same function a d3.path instance instead of a 2D context, and the path instance will store the generated path internally. We can retrieve the path as a string of [SVG path data commands](https://www.w3.org/TR/SVG/paths.html#PathDataLinetoCommands) by calling *path*.toString.","pinned":false,"hidden":false,"mode":"md"},{"id":61,"value":"draw(d3.path()).toString()","pinned":true,"hidden":false,"mode":"ojs"},{"id":609,"value":"The toString method will be called implicitly when coercing a path instance to a string. This means that we can easily create the SVG path with the exact same function we used with canvas:","pinned":false,"hidden":false,"mode":"md"},{"id":33,"value":"","pinned":true,"hidden":false,"mode":"html"},{"id":42,"value":"Equivalently, we can use [*selection*.attr](https://d3js.org/d3-selection/modifying#selection_attr) method to set the path’s _d_ attribute:","pinned":false,"hidden":false,"mode":"md"},{"id":45,"value":"d3.create(\"svg\")\n .call(svg => svg.append(\"path\")\n .style(\"stroke\", \"black\")\n .style(\"fill\", \"none\")\n .attr(\"d\", draw(d3.path())))\n .node()","pinned":true,"hidden":false,"mode":"ojs"},{"id":71,"value":"A d3.path instance accumulates turtle commands. Thus, it can be passed to several drawing functions and be collected once at the end:","pinned":false,"hidden":false,"mode":"md"},{"id":102,"value":"function square(context) {\n context.rect(10, 10, 140, 140);\n return context;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":105,"value":"function circle(context) {\n context.moveTo(150, 80);\n context.arc(80, 80, 70, 0, Math.PI * 2);\n return context;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":72,"value":"quadrature = {\n const p = d3.path();\n square(p);\n circle(p);\n return p.toString(); // the resulting SVG path contains both square and circle\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":80,"value":"","pinned":true,"hidden":false,"mode":"html"},{"id":98,"value":"Conversely, it means that a new d3.path should be created for each SVG path:","pinned":false,"hidden":false,"mode":"md"},{"id":100,"value":"","pinned":true,"hidden":false,"mode":"html"},{"id":201,"value":"Note: if you wish to export the final path as a file, you might want to minimize its size in bytes by quantizing the values. To do so you can use [pathRound](https://d3js.org/d3-path#pathRound), which defaults to using 3 decimal places:","pinned":false,"hidden":false,"mode":"md"},{"id":202,"value":"draw(d3.pathRound()).toString()","pinned":true,"hidden":false,"mode":"ojs"},{"id":617,"value":"d3.path is essentially the inverse of [Path2D](https://developer.mozilla.org/en-US/docs/Web/API/Path2D/Path2D), which takes SVG path data and translates it into Canvas 2D context commands.","pinned":false,"hidden":false,"mode":"md"},{"id":618,"value":"{\n const context = DOM.context2d(width, 150);\n const path = new Path2D(\"M10,10L100,10L129.5,92.6A40,40,0,0,0,194.4,108.4L300,10\");\n context.stroke(path);\n return context.canvas;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":856,"value":"$30","pinned":false,"hidden":false,"mode":"md"},{"id":857,"value":"### [*path*.moveTo(*x*, *y*)](https://d3js.org/d3-path#path_moveTo)\n\nMove to the specified point ⟨*x*, *y*⟩. As such it does nothing, but is used to define where to start the next command.","pinned":false,"hidden":false,"mode":"md"},{"id":858,"value":"### [*path*.closePath()](https://d3js.org/d3-path#path_closePath)\n\nEnds the current subpath and causes an automatic straight line to be drawn from the current point to the initial point of the current subpath.","pinned":false,"hidden":false,"mode":"md"},{"id":279,"value":"### [*path*.lineTo(*x*, *y*)](https://d3js.org/d3-path#path_lineTo)\n\nDraws a straight line from the current point to the specified point ⟨*x*, *y*⟩.","pinned":false,"hidden":false,"mode":"md"},{"id":864,"value":"The following example joins these three commands: it creates a random walk, connecting steps with *path*.lineTo, with two options:","pinned":false,"hidden":false,"mode":"md"},{"id":330,"value":"viewof walkOptions = Inputs.checkbox(\n new Map([\n [\"Use moveTo every second step\", \"moveTo\"],\n [\"end with closePath\", \"closePath\"]\n ])\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":282,"value":"{\n const path = d3.path();\n\n const x0 = 200,\n y0 = 200;\n var x = x0,\n y = y0;\n\n path.moveTo(x, y);\n\n for (var i = 0; i < 50; i++) {\n x += 60 * (Math.random() - 0.5);\n y += 60 * (Math.random() - 0.5);\n\n if (i % 2 && walkOptions.includes(\"moveTo\")) path.moveTo(x, y);\n else path.lineTo(x, y);\n\n yield svg``;\n }\n\n if (walkOptions.includes(\"closePath\")) path.closePath();\n\n yield svg``;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":357,"value":"### [*path*.quadraticCurveTo(*cpx*, *cpy*, *x*, *y*)](https://d3js.org/d3-path#path_quadraticCurveTo)\n\nDraws a quadratic Bézier segment from the current point to the specified point ⟨*x*, *y*⟩, with the specified control point ⟨*cpx*, *cpy*⟩.","pinned":false,"hidden":false,"mode":"md"},{"id":359,"value":"chart = {\n const x0 = 40,\n y0 = 100,\n cpx = 150,\n cpy = 280,\n x = 350,\n y = 20;\n\n const path = d3.path();\n path.moveTo(x0, y0);\n path.quadraticCurveTo(cpx, cpy, x, y);\n\n const chart = svg``;\n\n // return chart;\n\n /**\n * Add control elements and prepare interactions\n */\n\n const points = [[x0, y0], [cpx, cpy], [x, y]],\n labels = [\"Start\", \"Control\", \"End\"],\n lines = [[points[0], points[1]], [points[1], points[2]]],\n draw = () => {\n const path = d3.path();\n path.moveTo(...points[0]);\n path.quadraticCurveTo(...points[1], ...points[2]);\n return path;\n };\n\n draggable(chart, points, labels, lines, draw);\n\n return chart;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":423,"value":"### [*path*.bezierCurveTo(*cpx1*, *cpy1*, *cpx2*, *cpy2*, *x*, *y*)](https://d3js.org/d3-path#path_bezierCurveTo)\n\nDraws 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*⟩.","pinned":false,"hidden":false,"mode":"md"},{"id":602,"value":"{\n const path = d3.path(),\n x0 = 40,\n y0 = 100,\n cpx1 = 150,\n cpy1 = 280,\n cpx2 = 150,\n cpy2 = 30,\n x = 350,\n y = 50;\n\n path.moveTo(x0, y0);\n path.bezierCurveTo(cpx1, cpy1, cpx2, cpy2, x, y);\n\n const chart = svg``;\n\n // return chart;\n\n /**\n * Add control elements and prepare interactions\n */\n\n const points = [[x0, y0], [cpx1, cpy1], [cpx2, cpy2], [x, y]],\n labels = [\"Start\", \"Control1\", \"Control2\", \"End\"],\n lines = [[points[0], points[1]], [points[2], points[3]]],\n draw = () => {\n const path = d3.path();\n path.moveTo(...points[0]);\n path.bezierCurveTo(...points[1], ...points[2], ...points[3]);\n return path;\n };\n\n draggable(chart, points, labels, lines, draw);\n\n return chart;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":450,"value":"### [*path*.arcTo(*x1*, *y1*, *x2*, *y2*, *radius*)](https://d3js.org/d3-path#path_arcTo)\n\nDraws 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. However, to complete to the end point, an explicit call to *path*.lineTo must be made.","pinned":false,"hidden":false,"mode":"md"},{"id":466,"value":"viewof arcToOptions = Inputs.checkbox(new Map([[\"lineTo ⟨x2, y2⟩\", \"lineTo\"]]))","pinned":false,"hidden":false,"mode":"ojs"},{"id":601,"value":"{\n const path = d3.path(),\n x0 = 40,\n y0 = 100,\n x1 = 150,\n y1 = 280,\n x2 = 350,\n y2 = 20,\n radius = 100;\n\n path.moveTo(x0, y0);\n path.arcTo(x1, y1, x2, y2, radius);\n if (arcToOptions.includes(\"lineTo\")) path.lineTo(x2, y2);\n\n const chart = svg``;\n\n // return chart;\n\n /**\n * Add control elements and prepare interactions\n */\n\n const points = [[x0, y0], [x1, y1], [x2, y2]],\n labels = [\"Start\", \"⟨x1, y1⟩\", \"End\"],\n lines = [[points[0], points[1]], [points[1], points[2]]],\n draw = () => {\n const path = d3.path();\n path.moveTo(...points[0]);\n path.arcTo(...points[1], ...points[2], radius);\n if (arcToOptions.includes(\"lineTo\"))\n path.lineTo(...points[2]);\n return path;\n };\n\n draggable(chart, points, labels, lines, draw);\n\n return chart;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":53,"value":"### [*path*.arc(*x*, *y*, *radius*, *startAngle*, *endAngle*[, *anticlockwise*])](https://d3js.org/d3-path#path_arc)\n\nDraws a circular arc segment with the specified center ⟨*x*, *y*⟩, *radius*, *startAngle* and *endAngle*. If *anticlockwise*, a boolean, 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.","pinned":false,"hidden":false,"mode":"md"},{"id":599,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":594,"value":"viewof arcOptions = Inputs.checkbox(\n new Map([\n [\"moveTo ⟨x0, y0⟩\", \"moveTo\"],\n [\"Anticlockwise\", \"anticlockwise\"]\n ])\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":452,"value":"### [*path*.rect(*x*, *y*, *w*, *h*)](hhttps://d3js.org/d3-path#path_rect)\n\nCreates 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. If you have read up to this point, chances are you don’t need a detailed example for *path*.rect.","pinned":false,"hidden":false,"mode":"md"},{"id":631,"value":"---\n## Annex\n\nThanks to [Evan Galloway](https://observablehq.com/@gallowayevan) for the suggestions.","pinned":false,"hidden":false,"mode":"md"},{"id":592,"value":"html``","pinned":true,"hidden":false,"mode":"ojs"},{"id":591,"value":"function update(chart, points, labels, lines, draw) {\n d3.select(chart)\n .select(\".u-path\")\n .attr(\"d\", draw());\n\n d3.select(chart)\n .selectAll(\".u-point\")\n .data(points)\n .join(enter =>\n enter\n .append(\"g\")\n .classed(\"u-point\", true)\n .call(g => {\n g.append(\"circle\").attr(\"r\", 3);\n g.append(\"text\")\n .text((d, i) => labels[i])\n .attr(\"dy\", d => (d[1] > 100 ? 15 : -5));\n })\n )\n .attr(\"transform\", d => `translate(${d})`);\n\n d3.select(chart)\n .selectAll(\".u-line\")\n .data(lines)\n .join(\"line\")\n .attr(\"x1\", d => d[0][0])\n .attr(\"y1\", d => d[0][1])\n .attr(\"x2\", d => d[1][0])\n .attr(\"y2\", d => d[1][1])\n .classed(\"u-line\", true);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":590,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}