|
1 | 1 | # d3-path |
2 | 2 |
|
3 | | -Say you have some code that draws to a 2D canvas: |
| 3 | +<a href="https://d3js.org"><img src="https://github.com/d3/d3/raw/main/docs/public/logo.svg" width="256" height="256"></a> |
4 | 4 |
|
5 | | -```js |
6 | | -function drawCircle(context, radius) { |
7 | | - context.moveTo(radius, 0); |
8 | | - context.arc(0, 0, radius, 0, 2 * Math.PI); |
9 | | -} |
10 | | -``` |
| 5 | +This module provides a common API for drawing in SVG and canvas. |
11 | 6 |
|
12 | | -The d3-path module lets you take this exact code and additionally render to [SVG](http://www.w3.org/TR/SVG/paths.html). It works by [serializing](#path_toString) [CanvasPathMethods](http://www.w3.org/TR/2dcontext/#canvaspathmethods) calls to [SVG path data](http://www.w3.org/TR/SVG/paths.html#PathData). For example: |
| 7 | +## Resources |
13 | 8 |
|
14 | | -```js |
15 | | -const context = d3.path(); |
16 | | -drawCircle(context, 40); |
17 | | -pathElement.setAttribute("d", context.toString()); |
18 | | -``` |
19 | | - |
20 | | -Now code you write once can be used with both Canvas (for performance) and SVG (for convenience). For a practical example, see [d3-shape](https://github.com/d3/d3-shape). |
21 | | - |
22 | | -## Installing |
23 | | - |
24 | | -If you use npm, `npm install d3-path`. You can also download the [latest release on GitHub](https://github.com/d3/d3-path/releases/latest). In modern browsers, you can import d3-path from jsDelivr: |
25 | | - |
26 | | -```html |
27 | | -<script type="module"> |
28 | | -
|
29 | | -import {path} from "https://cdn.jsdelivr.net/npm/d3-path@3/+esm"; |
30 | | -
|
31 | | -const p = path(); |
32 | | -p.moveTo(1, 2); |
33 | | -p.lineTo(3, 4); |
34 | | -p.closePath(); |
35 | | -
|
36 | | -</script> |
37 | | -``` |
38 | | - |
39 | | -For legacy environments, you can load d3-path’s UMD bundle from an npm-based CDN such as jsDelivr; a `d3` global is exported: |
40 | | - |
41 | | -```html |
42 | | -<script src="https://cdn.jsdelivr.net/npm/d3-path@3"></script> |
43 | | -<script> |
44 | | -
|
45 | | -const path = d3.path(); |
46 | | -
|
47 | | -</script> |
48 | | -``` |
49 | | - |
50 | | -## API Reference |
51 | | - |
52 | | -<a name="path" href="#path">#</a> d3.<b>path</b>() · [Source](https://github.com/d3/d3-path/blob/master/src/path.js), [Examples](https://observablehq.com/@d3/d3-path) |
53 | | - |
54 | | -Constructs a new path serializer that implements [CanvasPathMethods](http://www.w3.org/TR/2dcontext/#canvaspathmethods). |
55 | | - |
56 | | -<a name="path_moveTo" href="#path_moveTo">#</a> <i>path</i>.<b>moveTo</b>(<i>x</i>, <i>y</i>) |
57 | | - |
58 | | -Move to the specified point ⟨*x*, *y*⟩. Equivalent to [*context*.moveTo](http://www.w3.org/TR/2dcontext/#dom-context-2d-moveto) and SVG’s [“moveto” command](http://www.w3.org/TR/SVG/paths.html#PathDataMovetoCommands). |
59 | | - |
60 | | -<a name="path_closePath" href="#path_closePath">#</a> <i>path</i>.<b>closePath</b>() |
61 | | - |
62 | | -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](http://www.w3.org/TR/2dcontext/#dom-context-2d-closepath) and SVG’s [“closepath” command](http://www.w3.org/TR/SVG/paths.html#PathDataClosePathCommand). |
63 | | - |
64 | | -<a name="path_lineTo" href="#path_lineTo">#</a> <i>path</i>.<b>lineTo</b>(<i>x</i>, <i>y</i>) |
65 | | - |
66 | | -Draws a straight line from the current point to the specified point ⟨*x*, *y*⟩. Equivalent to [*context*.lineTo](http://www.w3.org/TR/2dcontext/#dom-context-2d-lineto) and SVG’s [“lineto” command](http://www.w3.org/TR/SVG/paths.html#PathDataLinetoCommands). |
67 | | - |
68 | | -<a name="path_quadraticCurveTo" href="#path_quadraticCurveTo">#</a> <i>path</i>.<b>quadraticCurveTo</b>(<i>cpx</i>, <i>cpy</i>, <i>x</i>, <i>y</i>) |
69 | | - |
70 | | -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](http://www.w3.org/TR/2dcontext/#dom-context-2d-quadraticcurveto) and SVG’s [quadratic Bézier curve commands](http://www.w3.org/TR/SVG/paths.html#PathDataQuadraticBezierCommands). |
71 | | - |
72 | | -<a name="path_bezierCurveTo" href="#path_bezierCurveTo">#</a> <i>path</i>.<b>bezierCurveTo</b>(<i>cpx1</i>, <i>cpy1</i>, <i>cpx2</i>, <i>cpy2</i>, <i>x</i>, <i>y</i>) |
73 | | - |
74 | | -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](http://www.w3.org/TR/2dcontext/#dom-context-2d-beziercurveto) and SVG’s [cubic Bézier curve commands](http://www.w3.org/TR/SVG/paths.html#PathDataCubicBezierCommands). |
75 | | - |
76 | | -<a name="path_arcTo" href="#path_arcTo">#</a> <i>path</i>.<b>arcTo</b>(<i>x1</i>, <i>y1</i>, <i>x2</i>, <i>y2</i>, <i>radius</i>) |
77 | | - |
78 | | -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](http://www.w3.org/TR/2dcontext/#dom-context-2d-arcto) and uses SVG’s [elliptical arc curve commands](http://www.w3.org/TR/SVG/paths.html#PathDataEllipticalArcCommands). |
79 | | - |
80 | | -<a name="path_arc" href="#path_arc">#</a> <i>path</i>.<b>arc</b>(<i>x</i>, <i>y</i>, <i>radius</i>, <i>startAngle</i>, <i>endAngle</i>[, <i>anticlockwise</i>]) |
81 | | - |
82 | | -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](http://www.w3.org/TR/2dcontext/#dom-context-2d-arc) and uses SVG’s [elliptical arc curve commands](http://www.w3.org/TR/SVG/paths.html#PathDataEllipticalArcCommands). |
83 | | - |
84 | | -<a name="path_rect" href="#path_rect">#</a> <i>path</i>.<b>rect</b>(<i>x</i>, <i>y</i>, <i>w</i>, <i>h</i>) |
85 | | - |
86 | | -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](http://www.w3.org/TR/2dcontext/#dom-context-2d-rect) and uses SVG’s [“lineto” commands](http://www.w3.org/TR/SVG/paths.html#PathDataLinetoCommands). |
87 | | - |
88 | | -<a name="path_toString" href="#path_toString">#</a> <i>path</i>.<b>toString</b>() |
89 | | - |
90 | | -Returns the string representation of this *path* according to SVG’s [path data specification](http://www.w3.org/TR/SVG/paths.html#PathData). |
91 | | - |
92 | | -<a name="pathRound" href="#pathRound">#</a> d3.<b>pathRound</b>(*digits* = 3) · [Source](https://github.com/d3/d3-path/blob/master/src/path.js), [Examples](https://observablehq.com/@d3/d3-path) |
93 | | - |
94 | | -Like [d3.path](#path), except limits the digits after the decimal to the specified number of *digits*. |
| 9 | +- [Documentation](https://d3js.org/d3-path) |
| 10 | +- [Examples](https://observablehq.com/collection/@d3/d3-path) |
| 11 | +- [Releases](https://github.com/d3/d3-path/releases) |
| 12 | +- [Getting help](https://d3js.org/community) |
0 commit comments