https://github.com/maxblee/d3-regular-polygon
Create regular polygons (equal sides and equal angles) for use in SVG paths or canvas
https://github.com/maxblee/d3-regular-polygon
Last synced: about 1 month ago
JSON representation
Create regular polygons (equal sides and equal angles) for use in SVG paths or canvas
- Host: GitHub
- URL: https://github.com/maxblee/d3-regular-polygon
- Owner: maxblee
- License: bsd-3-clause
- Created: 2020-09-02T04:48:05.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2020-09-02T05:14:47.000Z (almost 6 years ago)
- Last Synced: 2025-07-11T08:14:09.091Z (12 months ago)
- Language: JavaScript
- Size: 13.7 KB
- Stars: 0
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# d3-regular-polygon
This is a module for building regular polygons with a variable number of edges
in `d3`. It is built to work with SVG `path` tags
and `canvas`.
## Installing
If you use NPM, `npm install d3-polygon`. Otherwise, download the [latest release](https://github.com/maxblee/d3-regular-polygon/releases/latest).
## API Reference
# d3.regularPolygon(cx = 0, cy = 0, r, edges, rotation = 0)
Constructs a new default constructor for regular polygons. You can optionally set the center x position `cx`, the center y position `cy`, the radius `r`, the number of sides `edges`, or the rotation of the first vertex (in radians) `rotation`.
Starting with
```javascript
var poly = d3.regularPolygon()
```
you can also set those paramters using one of the following
method-chaining constructor methods:
### Constructor Methods
Sets the radius of the polygon.
Sets the center of the polygon. If there is only one argument, it sets x = x[0], y = x[1].
Sets the number of sides the polygon has. Should be an integer
greater or equal to 3.
Sets the amount of (in radians) you want the polygon to rotate (relative to the position of the first vertex).
### Vertex methods
You can also get information about the vertices of your regular polygon. These methods are designed to make it easy to render the polygon in different contexts.
Returns the coordinates as an array of 2-item arrays [[x0, y0], [x1,y1]], etc.
Returns the SVG path of the polygon (i.e. the d-attribute).
In other words, rendering the polygon is as easy as:
```javascript
d3.select("#my-graphic")
.append("path")
.attr("d", poly.path());
```
Returns the SVG `` points attribute for the polygon.
In other words, you can also render a polygon as:
```javascript
selection.append("polygon")
.attr("points", poly.polygon());
```
This renders the polygon to canvas. Here's an example of how to use that:
```javascript
var canvas = document.getElementById("my-canvas");
var context = canvas.getContext("2d");
context.fillStyle = "maroon";
poly.canvas(context);
context.fill();
```
### Measurements
Finally, you can run measurements of the polygon. This can
be useful if you want to dynamically size based on the value of certain elements (for instance, size elements based on the area or the perimeter of the polygon).
This returns the size of the*apothem*, or the distance from the center of the polygon to the *midpoint* between any two vertices.
Shows the length of any given side.
Shows the perimeter of the polygon.
Shows the area of the polygon.