mirror of
https://github.com/d3/d3.git
synced 2025-12-08 19:46:24 +00:00
6d6c6792f1
* checkpoint vitepress docs * edits * edits * hero drop shadow * d3-array edits * resolve d3 * split d3-array * move d3-array stuff around * d3-array is collapsed: true * italicize parameter names * searching edits * update dependencies * d3-array edits * array edits * array edits * array edits * array edits * array edits * move files * array edits * array edits * array edits * getting started edits * modules page * array edits * more structure * live example * dsv edits * fetch edits * dsv edits * random edits * time format edits * time edits * time edits * modules edits * color edits * color edits * interpolate edits * scale-chromatic edits * selection edits * break up d3-interpolate * scale edits * time scale edits * scale edits * scale edits * band edits * band edits * more descriptive titles * band and point edits * sequential edits * diverging edits * quantize edits * quantile edits * threshold edits * doc edits * fix titles * sequential edits * axis edits * axis edits * axis edits * shape edits * shape edits * dark mode chart * dark mode chart * curve edits * interpolate edits * line edits * link edits * radial edits * pie edits * symbol edits * stack edits * stack examples * path edits * polygon edits * quadtree edits * random examples * ease edits * ease edits * ease edits * timer edits * delaunay edits * quadtree find example * voronoi edits * dispatch edits * contour edits * chord edits * chord edits * fix find highlight * quadtree animation * transition edits * transition edits * transition edits * zoom edits * drag edits * brush edits * force edits * voronoi neighbors example * hierarchy edits * api edits * community edits * getting started edits * geo edits * Add short "D3 in React" section (#3659) * Add short "D3 in React" section I know you removed the TODO but I was already trying to fill it in! I think just making the distinction of modules that touch the DOM and those that don't was super clarifying for me personally when I figured that out. And I always forget the most basic ref pattern (and still might've messed it up here). I don't think we should get into updating or interactivity or whatever, but I think just this much goes a long way toward demystifying (and showing just the most basic best practices). * forgot i made data generic, rm reference to normal distribution * useEffect cleans up after itself Co-authored-by: Mike Bostock <mbostock@gmail.com> * Update getting-started.md --------- Co-authored-by: Mike Bostock <mbostock@gmail.com> * build fixes * index edits --------- Co-authored-by: Toph Tucker <tophtucker@gmail.com>
64 lines
2.7 KiB
Markdown
64 lines
2.7 KiB
Markdown
<script setup>
|
||
|
||
import * as Plot from "@observablehq/plot";
|
||
import * as d3 from "d3";
|
||
import PlotRender from "./components/PlotRender.js";
|
||
|
||
const random = d3.randomNormal.source(d3.randomLcg(42))();
|
||
const points = Array.from({length: 1000}, () => [random(), random()]);
|
||
|
||
</script>
|
||
|
||
# d3-polygon
|
||
|
||
This module provides a few basic geometric operations for two-dimensional polygons. Each polygon is represented as an array of two-element arrays [[*x0*, *y0*], [*x1*, *y1*], …], and may either be closed (wherein the first and last point are the same) or open (wherein they are not). Typically polygons are in counterclockwise order, assuming a coordinate system where the origin is in the top-left corner.
|
||
|
||
## polygonArea(*polygon*) {#polygonArea}
|
||
|
||
```js
|
||
d3.polygonArea([[1, 1], [1.5, 0], [2, 1]]) // -0.5
|
||
```
|
||
|
||
[Source](https://github.com/d3/d3-polygon/blob/main/src/area.js) · Returns the signed area of the specified *polygon*. If the vertices of the polygon are in counterclockwise order (assuming a coordinate system where the origin is in the top-left corner), the returned area is positive; otherwise it is negative, or zero.
|
||
|
||
## polygonCentroid(*polygon*) {#polygonCentroid}
|
||
|
||
```js
|
||
d3.polygonArea([[1, 1], [1.5, 0], [2, 1]]) // [1.5, 0.6666666666666666]
|
||
```
|
||
|
||
[Source](https://github.com/d3/d3-polygon/blob/main/src/centroid.js) · Returns the [centroid](https://en.wikipedia.org/wiki/Centroid) of the specified *polygon*.
|
||
|
||
## polygonHull(*points*) {#polygonHull}
|
||
|
||
<PlotRender defer :options='{
|
||
axis: null,
|
||
aspectRatio: 1,
|
||
marks: [
|
||
Plot.dot(points, {r: 2, fill: "currentColor"}),
|
||
Plot.hull(points)
|
||
]
|
||
}' />
|
||
|
||
```js
|
||
d3.polygonHull(points) // [[3.0872864263338777, -1.300100095019402], [1.6559368816733773, -2.5092525689499605], …]
|
||
```
|
||
|
||
[Source](https://github.com/d3/d3-polygon/blob/main/src/hull.js#L23) · Returns the [convex hull](https://en.wikipedia.org/wiki/Convex_hull) of the specified *points* using [Andrew’s monotone chain algorithm](http://en.wikibooks.org/wiki/Algorithm_Implementation/Geometry/Convex_hull/Monotone_chain). The returned hull is represented as an array containing a subset of the input *points* arranged in counterclockwise order. Returns null if *points* has fewer than three elements.
|
||
|
||
## polygonContains(*polygon*, *point*) {#polygonContains}
|
||
|
||
```js
|
||
d3.polygonContains([[1, 1], [1.5, 0], [2, 1]], [1.5, 0.667]) // true
|
||
```
|
||
|
||
[Source](https://github.com/d3/d3-polygon/blob/main/src/contains.js) · Returns true if and only if the specified *point* is inside the specified *polygon*.
|
||
|
||
## polygonLength(*polygon*) {#polygonLength}
|
||
|
||
```js
|
||
d3.polygonLength([[1, 1], [1.5, 0], [2, 1]]) // 3.23606797749979
|
||
```
|
||
|
||
[Source](https://github.com/d3/d3-polygon/blob/main/src/length.js) · Returns the length of the perimeter of the specified *polygon*.
|