UNPKG

21.6 kBTypeScriptView Raw
1// Type definitions for D3JS d3-interpolate module 3.0
2// Project: https://github.com/d3/d3-interpolate/, https://d3js.org/d3-interpolate
3// Definitions by: Tom Wanzek <https://github.com/tomwanzek>
4// Alex Ford <https://github.com/gustavderdrache>
5// Boris Yankov <https://github.com/borisyankov>
6// denisname <https://github.com/denisname>
7// Nathan Bierema <https://github.com/Methuselah96>
8// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
9
10// Last module patch version validated against: 3.0.1
11
12import { ColorCommonInstance } from 'd3-color';
13
14// ---------------------------------------------------------------------------
15// Shared Type Definitions and Interfaces
16// ---------------------------------------------------------------------------
17
18export interface ZoomInterpolator extends Function {
19 (t: number): ZoomView;
20 /**
21 * Recommended duration of zoom transition in milliseconds.
22 */
23 duration: number;
24
25 /**
26 * Given a zoom interpolator, returns a new zoom interpolator using the specified curvature rho.
27 * When rho is close to 0, the interpolator is almost linear.
28 * The default curvature is sqrt(2).
29 * @param rho
30 */
31 rho(rho: number): this;
32}
33
34export interface ColorGammaInterpolationFactory extends Function {
35 (a: string | ColorCommonInstance, b: string | ColorCommonInstance): ((t: number) => string);
36 /**
37 * Returns a new interpolator factory of the same type using the specified *gamma*.
38 * For example, to interpolate from purple to orange with a gamma of 2.2 in RGB space: `d3.interpolateRgb.gamma(2.2)("purple", "orange")`.
39 * See Eric Brasseurs article, [Gamma error in picture scaling](https://web.archive.org/web/20160112115812/http://www.4p8.com/eric.brasseur/gamma.html), for more on gamma correction.
40 */
41 gamma(g: number): ColorGammaInterpolationFactory;
42}
43
44/**
45 * Type zoomView is used to represent a numeric array with three elements.
46 * In order of appearance the elements correspond to:
47 * - cx: *x*-coordinate of the center of the viewport
48 * - cy: *y*-coordinate of the center of the viewport
49 * - width: size of the viewport
50 */
51export type ZoomView = [number, number, number];
52
53export type TypedArray =
54 | Int8Array
55 | Uint8Array
56 | Int16Array
57 | Uint16Array
58 | Int32Array
59 | Uint32Array
60 | Uint8ClampedArray
61 | Float32Array
62 | Float64Array;
63
64export type NumberArray = TypedArray | DataView;
65
66// ---------------------------------------------------------------------------
67// Interpolation Function Factories
68// ---------------------------------------------------------------------------
69
70/**
71 * Returns an `null` constant interpolator.
72 */
73export function interpolate(a: any, b: null): ((t: number) => null);
74/**
75 * Returns an boolean constant interpolator of value `b`.
76 */
77export function interpolate(a: any, b: boolean): ((t: number) => boolean);
78/**
79 * Returns a `interpolateRgb` interpolator.
80 */
81export function interpolate(a: string | ColorCommonInstance, b: ColorCommonInstance): ((t: number) => string);
82/**
83 * Returns a `interpolateDate` interpolator.
84 */
85export function interpolate(a: Date, b: Date): ((t: number) => Date);
86/**
87 * Returns a `interpolateNumber` interpolator.
88 */
89export function interpolate(a: number | { valueOf(): number }, b: number | { valueOf(): number }): ((t: number) => number);
90/**
91 * Returns a `interpolateNumberArray` interpolator.
92 */
93export function interpolate<T extends NumberArray>(a: NumberArray | number[], b: T): ((t: number) => T);
94/**
95 * Returns a `interpolateString` interpolator. If `b` is a string coercible to a color use use `interpolateRgb`.
96 */
97export function interpolate(a: string | { toString(): string }, b: string): ((t: number) => string);
98/**
99 * Returns a `interpolateArray` interpolator.
100 */
101export function interpolate<U extends any[]>(a: any[], b: U): ((t: number) => U);
102/**
103 * Returns a `interpolateObject` interpolator.
104 */
105export function interpolate<U extends object>(a: any, b: U): ((t: number) => U);
106
107/**
108 * Returns an interpolator between the two numbers `a` and `b`.
109 * The returned interpolator is equivalent to: `(t) => a * (1 - t) + b * t`.
110 */
111export function interpolateNumber(a: number | { valueOf(): number }, b: number | { valueOf(): number }): ((t: number) => number);
112
113/**
114 * Returns an interpolator between the two numbers `a` and `b`; the interpolator is similar to `interpolateNumber`,
115 * except it will round the resulting value to the nearest integer.
116 */
117export function interpolateRound(a: number | { valueOf(): number }, b: number | { valueOf(): number }): ((t: number) => number);
118
119/**
120 * Returns an interpolator between the two strings `a` and `b`.
121 * The string interpolator finds numbers embedded in `a` and `b`, where each number is of the form understood by JavaScript.
122 * A few examples of numbers that will be detected within a string: `-1`, `42`, `3.14159`, and `6.0221413e+23`.
123 *
124 * For each number embedded in `b`, the interpolator will attempt to find a corresponding number in `a`.
125 * If a corresponding number is found, a numeric interpolator is created using `interpolateNumber`.
126 * The remaining parts of the string `b` are used as a template.
127 *
128 * For example, if `a` is `"300 12px sans-serif"`, and `b` is `"500 36px Comic-Sans"`, two embedded numbers are found.
129 * The remaining static parts (of string `b`) are a space between the two numbers (`" "`), and the suffix (`"px Comic-Sans"`).
130 * The result of the interpolator at `t` = 0.5 is `"400 24px Comic-Sans"`.
131 */
132export function interpolateString(a: string | { toString(): string }, b: string | { toString(): string }): ((t: number) => string);
133
134/**
135 * Returns an interpolator between the two dates `a` and `b`.
136 *
137 * Note: *no defensive copy* of the returned date is created; the same Date instance is returned for every evaluation of the interpolator.
138 * No copy is made for performance reasons; interpolators are often part of the inner loop of animated transitions.
139 */
140export function interpolateDate(a: Date, b: Date): ((t: number) => Date);
141
142export type ArrayInterpolator<A extends any[]> = ((t: number) => A);
143
144/**
145 * Returns an interpolator between the two arrays `a` and `b`. Internally, an array template is created that is the same length in `b`.
146 * For each element in `b`, if there exists a corresponding element in `a`, a generic interpolator is created for the two elements using `interpolate`.
147 * If there is no such element, the static value from `b` is used in the template.
148 * Then, for the given parameter `t`, the template’s embedded interpolators are evaluated. The updated array template is then returned.
149 *
150 * For example, if `a` is the array `[0, 1]` and `b` is the array `[1, 10, 100]`, then the result of the interpolator for `t = 0.5` is the array `[0.5, 5.5, 100]`.
151 *
152 * Note: *no defensive copy* of the template array is created; modifications of the returned array may adversely affect subsequent evaluation of the interpolator.
153 * No copy is made for performance reasons; interpolators are often part of the inner loop of animated transitions.
154 */
155export function interpolateArray<A extends any[]>(a: any[], b: A): ArrayInterpolator<A>;
156/**
157 * interpolateNumberArray is called
158 */
159export function interpolateArray<T extends NumberArray>(a: NumberArray | number[], b: T): ((t: number) => T);
160
161/**
162 * Returns an interpolator between the two arrays of numbers a and b.
163 * Internally, an array template is created that is the same type and length as b.
164 * For each element in b, if there exists a corresponding element in a, the values are directly interpolated in the array template.
165 * If there is no such element, the static value from b is copied.
166 * The updated array template is then returned.
167 *
168 * Note: For performance reasons, no defensive copy is made of the template array and the arguments a and b; modifications of these arrays may affect subsequent evaluation of the interpolator.
169 */
170export function interpolateNumberArray<T extends NumberArray | number[]>(a: NumberArray | number[], b: T): ((t: number) => T);
171
172/**
173 * Returns an interpolator between the two objects `a` and `b`. Internally, an object template is created that has the same properties as `b`.
174 * For each property in `b`, if there exists a corresponding property in `a`, a generic interpolator is created for the two elements using `interpolate`.
175 * If there is no such property, the static value from `b` is used in the template.
176 * Then, for the given parameter `t`, the template's embedded interpolators are evaluated and the updated object template is then returned.
177 *
178 * For example, if `a` is the object `{x: 0, y: 1}` and `b` is the object `{x: 1, y: 10, z: 100}`, the result of the interpolator for `t = 0.5` is the object `{x: 0.5, y: 5.5, z: 100}`.
179 *
180 * Note: *no defensive copy* of the template object is created; modifications of the returned object may adversely affect subsequent evaluation of the interpolator.
181 * No copy is made for performance reasons; interpolators are often part of the inner loop of animated transitions.
182 */
183export function interpolateObject<U extends object>(a: any, b: U): ((t: number) => U);
184
185/**
186 * Returns an interpolator between the two 2D CSS transforms represented by `a` and `b`.
187 * Each transform is decomposed to a standard representation of translate, rotate, *x*-skew and scale; these component transformations are then interpolated.
188 * This behavior is standardized by CSS: see [matrix decomposition for animation](http://www.w3.org/TR/css3-2d-transforms/#matrix-decomposition).
189 */
190export function interpolateTransformCss(a: string, b: string): ((t: number) => string);
191
192/**
193 * Returns an interpolator between the two 2D SVG transforms represented by `a` and `b`.
194 * Each transform is decomposed to a standard representation of translate, rotate, *x*-skew and scale; these component transformations are then interpolated.
195 * This behavior is standardized by CSS: see [matrix decomposition for animation](http://www.w3.org/TR/css3-2d-transforms/#matrix-decomposition).
196 */
197export function interpolateTransformSvg(a: string, b: string): ((t: number) => string);
198
199/**
200 * Returns an interpolator between the two views `a` and `b` of a two-dimensional plane,
201 * based on [“Smooth and efficient zooming and panning”](http://www.win.tue.nl/~vanwijk/zoompan.pdf).
202 * Each view is defined as an array of three numbers: *cx*, *cy* and *width*.
203 * The first two coordinates *cx*, *cy* represent the center of the viewport; the last coordinate *width* represents the size of the viewport.
204 *
205 * The returned interpolator exposes a *duration* property which encodes the recommended transition duration in milliseconds.
206 * This duration is based on the path length of the curved trajectory through *x,y* space.
207 * If you want to a slower or faster transition, multiply this by an arbitrary scale factor (*V* as described in the original paper).
208 */
209export function interpolateZoom(a: ZoomView, b: ZoomView): ZoomInterpolator;
210
211/**
212 * Returns a discrete interpolator for the given array of values. The returned interpolator maps `t` in `[0, 1 / n)` to values[0],
213 * `t` in `[1 / n, 2 / n)` to `values[1]`, and so on, where `n = values.length`. In effect, this is a lightweight quantize scale with a fixed domain of [0, 1].
214 */
215export function interpolateDiscrete<T>(values: T[]): ((t: number) => T);
216
217// Sampling ------------------------------------------------------------------
218
219/**
220 * Returns `n` uniformly-spaced samples from the specified `interpolator`, where `n` is an integer greater than one.
221 * The first sample is always at `t = 0`, and the last sample is always at `t = 1`.
222 * This can be useful in generating a fixed number of samples from a given interpolator,
223 * such as to derive the range of a [quantize scale](https://github.com/d3/d3-scale#quantize-scales) from a [continuous interpolator](https://github.com/d3/d3-scale#interpolateWarm).
224 *
225 * Caution: this method will not work with interpolators that do not return defensive copies of their output,
226 * such as `d3.interpolateArray`, `d3.interpolateDate` and `d3.interpolateObject`. For those interpolators, you must wrap the interpolator and create a copy for each returned value.
227 */
228export function quantize<T>(interpolator: ((t: number) => T), n: number): T[];
229
230// Color Spaces
231
232/**
233 * Returns an RGB color space interpolator between the two colors `a` and `b` with a configurable gamma. If the gamma is not specified, it defaults to 1.0.
234 * The colors `a` and `b` need not be in RGB; they will be converted to RGB using [`d3.rgb`](https://github.com/d3/d3-color#rgb). The return value of the interpolator is an RGB string.
235 */
236export const interpolateRgb: ColorGammaInterpolationFactory;
237
238/**
239 * Returns a uniform nonrational B-spline interpolator through the specified array of *colors*, which are converted to RGB color space.
240 * Implicit control points are generated such that the interpolator returns `colors[0]` at `t = 0` and `colors[colors.length - 1]` at `t = 1`.
241 * Opacity interpolation is not currently supported. See also `d3.interpolateBasis`, and see [d3-scale-chromatic](https://github.com/d3/d3-scale-chromatic) for examples.
242 */
243export function interpolateRgbBasis(colors: Array<string | ColorCommonInstance>): ((t: number) => string);
244
245/**
246 * Returns a uniform nonrational B-spline interpolator through the specified array of colors, which are converted to RGB color space.
247 * The control points are implicitly repeated such that the resulting spline has cyclical C² continuity when repeated around `t` in [0,1];
248 * this is useful, for example, to create cyclical color scales. Opacity interpolation is not currently supported.
249 * See also `d3.interpolateBasisClosed, and see [d3-scale-chromatic](https://github.com/d3/d3-scale-chromatic) for examples.
250 */
251export function interpolateRgbBasisClosed(colors: Array<string | ColorCommonInstance>): ((t: number) => string);
252
253/**
254 * Returns an HSL color space interpolator between the two colors *a* and *b*. The colors *a* and *b* need not be in HSL;
255 * they will be converted to HSL using `d3.hsl`. If either color’s hue or saturation is NaN, the opposing color’s channel value is used.
256 * The shortest path between hues is used. The return value of the interpolator is an RGB string.
257 */
258export function interpolateHsl(a: string | ColorCommonInstance, b: string | ColorCommonInstance): ((t: number) => string);
259
260/**
261 * Like `interpolateHsl`, but does not use the shortest path between hues.
262 */
263export function interpolateHslLong(a: string | ColorCommonInstance, b: string | ColorCommonInstance): ((t: number) => string);
264
265/**
266 * Returns a Lab color space interpolator between the two colors *a* and *b*. The colors *a* and *b* need not be in Lab;
267 * they will be converted to Lab using `d3.lab`. The return value of the interpolator is an RGB string.
268 */
269export function interpolateLab(a: string | ColorCommonInstance, b: string | ColorCommonInstance): ((t: number) => string);
270
271/**
272 * Returns an HCL color space interpolator between the two colors `a` and `b`. The colors `a` and `b` need not be in HCL;
273 * they will be converted to HCL using `d3.hcl`. If either color’s hue or chroma is NaN, the opposing color’s channel value is used.
274 * The shortest path between hues is used. The return value of the interpolator is an RGB string.
275 */
276export function interpolateHcl(a: string | ColorCommonInstance, b: string | ColorCommonInstance): ((t: number) => string);
277
278/**
279 * Like `interpolateHcl`, but does not use the shortest path between hues.
280 */
281export function interpolateHclLong(a: string | ColorCommonInstance, b: string | ColorCommonInstance): ((t: number) => string);
282
283/**
284 * Returns a Cubehelix color space interpolator between the two colors `a` and `b` using a configurable `gamma`.
285 * If the gamma is not specified, it defaults to 1.0. The colors `a` and `b` need not be in Cubehelix;
286 * they will be converted to Cubehelix using [`d3.cubehelix`](https://github.com/d3/d3-color#cubehelix).
287 * If either color’s hue or saturation is NaN, the opposing color’s channel value is used. The shortest path between hues is used. The return value of the interpolator is an RGB string.
288 */
289export const interpolateCubehelix: ColorGammaInterpolationFactory;
290
291/**
292 * Like `interpolateCubehelix`, but does not use the shortest path between hues.
293 */
294export const interpolateCubehelixLong: ColorGammaInterpolationFactory;
295
296/**
297 * Returns an interpolator between the two hue angles `a` and `b`. If either hue is NaN, the opposing value is used.
298 * The shortest path between hues is used. The return value of the interpolator is a number in `[0, 360)`.
299 */
300export function interpolateHue(a: number, b: number): ((t: number) => number);
301
302// Splines -------------------------------------------------------------------
303
304/**
305 * Returns a uniform nonrational B-spline interpolator through the specified array of `values`, which must be numbers.
306 * Implicit control points are generated such that the interpolator returns `values[0]` at `t` = 0 and `values[values.length - 1]` at `t` = 1.
307 * See also [`d3.curveBasis`](https://github.com/d3/d3-shape#curveBasis).
308 */
309export function interpolateBasis(splineNodes: number[]): ((t: number) => number);
310
311/**
312 * Returns a uniform nonrational B-spline interpolator through the specified array of `values`, which must be numbers.
313 * The control points are implicitly repeated such that the resulting one-dimensional spline has cyclical C² continuity when repeated around `t` in [0,1].
314 * See also [`d3.curveBasisClosed`](https://github.com/d3/d3-shape#curveBasisClosed).
315 */
316export function interpolateBasisClosed(splineNodes: number[]): ((t: number) => number);
317
318// Piecewise -----------------------------------------------------------------
319
320/**
321 * Returns a piecewise zoom interpolator, composing zoom interpolators for each adjacent pair of zoom view.
322 * The returned interpolator maps `t` in `[0, 1 / (n - 1)]` to `interpolate(values[0], values[1])`, `t` in `[1 / (n - 1), 2 / (n - 1)]` to `interpolate(values[1], values[2])`,
323 * and so on, where `n = values.length`. In effect, this is a lightweight linear scale.
324 * For example, to blend through three different zoom views: `d3.piecewise(d3.interpolateZoom, [[0, 0, 1], [0, 0, 10], [0, 0, 15]])`.
325 *
326 * interpolate defaults to d3.interpolate.
327 */
328export function piecewise(values: ZoomView[]): ZoomInterpolator;
329/**
330 * Returns a piecewise zoom interpolator, composing zoom interpolators for each adjacent pair of zoom view.
331 * The returned interpolator maps `t` in `[0, 1 / (n - 1)]` to `interpolate(values[0], values[1])`, `t` in `[1 / (n - 1), 2 / (n - 1)]` to `interpolate(values[1], values[2])`,
332 * and so on, where `n = values.length`. In effect, this is a lightweight linear scale.
333 * For example, to blend through three different zoom views: `d3.piecewise(d3.interpolateZoom, [[0, 0, 1], [0, 0, 10], [0, 0, 15]])`.
334 */
335export function piecewise(interpolate: (a: ZoomView, b: ZoomView) => ZoomInterpolator, values: ZoomView[]): ZoomInterpolator;
336
337/**
338 * Returns a piecewise array interpolator, composing array interpolators for each adjacent pair of arrays.
339 * The returned interpolator maps `t` in `[0, 1 / (n - 1)]` to `interpolate(values[0], values[1])`, `t` in `[1 / (n - 1), 2 / (n - 1)]` to `interpolate(values[1], values[2])`,
340 * and so on, where `n = values.length`. In effect, this is a lightweight linear scale.
341 * For example, to blend through three different arrays: `d3.piecewise(d3.interpolateArray, [[0, 0, 1], [0, 0, 10], [0, 0, 15]])`.
342 *
343 * interpolate defaults to d3.interpolate.
344 */
345export function piecewise<A extends any[]>(values: A[]): ArrayInterpolator<A>;
346/**
347 * Returns a piecewise array interpolator, composing array interpolators for each adjacent pair of arrays.
348 * The returned interpolator maps `t` in `[0, 1 / (n - 1)]` to `interpolate(values[0], values[1])`, `t` in `[1 / (n - 1), 2 / (n - 1)]` to `interpolate(values[1], values[2])`,
349 * and so on, where `n = values.length`. In effect, this is a lightweight linear scale.
350 * For example, to blend through three different arrays: `d3.piecewise(d3.interpolateArray, [[0, 0, 1], [0, 0, 10], [0, 0, 15]])`.
351 */
352export function piecewise<A extends any[]>(interpolate: (a: any[], b: A) => ArrayInterpolator<A>, values: A[]): ArrayInterpolator<A>;
353
354/**
355 * Returns a piecewise interpolator, composing interpolators for each adjacent pair of values.
356 * The returned interpolator maps `t` in `[0, 1 / (n - 1)]` to `interpolate(values[0], values[1])`, `t` in `[1 / (n - 1), 2 / (n - 1)]` to `interpolate(values[1], values[2])`,
357 * and so on, where `n = values.length`. In effect, this is a lightweight linear scale.
358 * For example, to blend through red, green and blue: `d3.piecewise(d3.interpolateRgb.gamma(2.2), ["red", "green", "blue"])`.
359 *
360 * interpolate defaults to d3.interpolate.
361 */
362export function piecewise(values: unknown[]): (t: number) => any;
363/**
364 * Returns a piecewise interpolator, composing interpolators for each adjacent pair of values.
365 * The returned interpolator maps `t` in `[0, 1 / (n - 1)]` to `interpolate(values[0], values[1])`, `t` in `[1 / (n - 1), 2 / (n - 1)]` to `interpolate(values[1], values[2])`,
366 * and so on, where `n = values.length`. In effect, this is a lightweight linear scale.
367 * For example, to blend through red, green and blue: `d3.piecewise(d3.interpolateRgb.gamma(2.2), ["red", "green", "blue"])`.
368 */
369export function piecewise<TData>(interpolate: (a: TData, b: TData) => unknown, values: TData[]): (t: number) => any;
370
\No newline at end of file