mirror of
https://github.com/d3/d3.git
synced 2025-12-08 19:46:24 +00:00
* 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>
93 lines
4.2 KiB
Markdown
93 lines
4.2 KiB
Markdown
# Transforming data
|
|
|
|
Transform arrays and generate new arrays.
|
|
|
|
## cross(...*iterables*, *reducer*) {#cross}
|
|
|
|
[Examples](https://observablehq.com/@d3/d3-cross) · [Source](https://github.com/d3/d3-array/blob/main/src/cross.js) · Returns the [Cartesian product](https://en.wikipedia.org/wiki/Cartesian_product) of the specified *iterables*.
|
|
|
|
```js
|
|
d3.cross([1, 2], ["x", "y"]) // [[1, "x"], [1, "y"], [2, "x"], [2, "y"]]
|
|
```
|
|
|
|
If a *reducer* is specified, it is invoked for each combination of elements from each of the given *iterables*, and returns the corresponding reduced value.
|
|
|
|
```js
|
|
d3.cross([1, 2], ["x", "y"], (a, b) => a + b) // ["1x", "1y", "2x", "2y"]
|
|
```
|
|
|
|
## merge(*iterables*) {#merge}
|
|
|
|
[Examples](https://observablehq.com/@d3/d3-merge) · [Source](https://github.com/d3/d3-array/blob/main/src/merge.js) · Merges the specified iterable of *iterables* into a new flat array. This method is similar to the built-in [*array*.concat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/concat) method, but is more convenient when you have an array of arrays or an iterable of iterables.
|
|
|
|
```js
|
|
d3.merge([[1], [2, 3]]) // [1, 2, 3]
|
|
```
|
|
|
|
```js
|
|
d3.merge(new Set([new Set([1]), new Set([2, 3])])) // [1, 2, 3]
|
|
```
|
|
|
|
## pairs(*iterable*, *reducer*) {#pairs}
|
|
|
|
[Examples](https://observablehq.com/@d3/d3-pairs) · [Source](https://github.com/d3/d3-array/blob/main/src/pairs.js) · Returns an array of adjacent pairs of elements from the specified *iterable*, in order. If the specified iterable has fewer than two elements, returns the empty array.
|
|
|
|
```js
|
|
d3.pairs([1, 2, 3, 4]) // [[1, 2], [2, 3], [3, 4]]
|
|
```
|
|
|
|
If a *reducer* function is specified, it is successively passed an element *i - 1* and element *i* from the *iterable*.
|
|
|
|
```js
|
|
d3.pairs([1, 1, 2, 3, 5], (a, b) => b - a) // [0, 1, 1, 2]
|
|
```
|
|
|
|
## transpose(*matrix*) {#transpose}
|
|
|
|
[Examples](https://observablehq.com/@d3/d3-transpose) · [Source](https://github.com/d3/d3-array/blob/main/src/transpose.js) · Uses the [zip](#zip) operator as a two-dimensional [matrix transpose](http://en.wikipedia.org/wiki/Transpose).
|
|
|
|
```js
|
|
d3.transpose([["Alice", "Bob", "Carol"], [32, 13, 14]]) // [["Alice", 32], ["Bob", 13], ["Carol", 14]]
|
|
```
|
|
```js
|
|
d3.transpose([["Alice", 32], ["Bob", 13], ["Carol", 14]]) // [["Alice", "Bob", "Carol"], [32, 13, 14]]
|
|
```
|
|
|
|
## zip(...*arrays*) {#zip}
|
|
|
|
[Examples](https://observablehq.com/@d3/d3-transpose) · [Source](https://github.com/d3/d3-array/blob/main/src/zip.js) · Returns an array of arrays, where the *i*th array contains the *i*th element from each of the argument *arrays*. The returned array is truncated in length to the shortest array in *arrays*. If *arrays* contains only a single array, the returned array contains one-element arrays. With no arguments, the returned array is empty.
|
|
|
|
```js
|
|
d3.zip(["Alice", "Bob", "Carol"], [32, 13, 14]) // [["Alice", 32], ["Bob", 13], ["Carol", 14]]
|
|
```
|
|
|
|
## filter(*iterable*, *test*) {#filter}
|
|
|
|
[Source](https://github.com/d3/d3-array/blob/main/src/filter.js) · Returns a new array containing the values from *iterable*, in order, for which the given *test* function returns true.
|
|
|
|
```js
|
|
d3.filter(new Set([0, 2, 3, 4]), (d) => d & 1) // [3]
|
|
```
|
|
|
|
Like [*array*.filter](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter), but works with any iterable.
|
|
|
|
## map(*iterable*, *mapper*) {#map}
|
|
|
|
[Source](https://github.com/d3/d3-array/blob/main/src/map.js) · Returns a new array containing the mapped values from *iterable*, in order, as defined by given *mapper* function.
|
|
|
|
```js
|
|
d3.map(new Set([0, 2, 3, 4]), (d) => d & 1) // [0, 0, 1, 0]
|
|
```
|
|
|
|
Like [*array*.map](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map), but works with any iterable.
|
|
|
|
## reduce(*iterable*, *reducer*, *initialValue*) {#reduce}
|
|
|
|
[Source](https://github.com/d3/d3-array/blob/main/src/reduce.js) · Returns the reduced value defined by given *reducer* function, which is repeatedly invoked for each value in *iterable*, being passed the current reduced value and the next value.
|
|
|
|
```js
|
|
d3.reduce(new Set([0, 2, 3, 4]), (p, v) => p + v, 0) // 9
|
|
```
|
|
|
|
Like [*array*.reduce](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce), but works with any iterable.
|