1 | // Type definitions for d3JS d3-zoom module 3.0
|
2 | // Project: https://github.com/d3/d3-zoom/, https://d3js.org/d3-zoom
|
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.0
|
11 |
|
12 | import { Selection, TransitionLike, ValueFn } from 'd3-selection';
|
13 | import { ZoomView } from 'd3-interpolate';
|
14 |
|
15 | // --------------------------------------------------------------------------
|
16 | // Shared Type Definitions and Interfaces
|
17 | // --------------------------------------------------------------------------
|
18 |
|
19 | /**
|
20 | * ZoomedElementBaseType serves as an alias for the 'minimal' data type which can be selected
|
21 | * without 'd3-zoom' (and related code in 'd3-selection') trying to use properties internally which would otherwise not
|
22 | * be supported.
|
23 | */
|
24 | export type ZoomedElementBaseType = Element;
|
25 |
|
26 | /**
|
27 | * Minimal interface for a continuous scale.
|
28 | * This interface is used as a minimum contract for scale objects
|
29 | * that can be passed into zoomTransform methods rescaleX and rescaleY
|
30 | */
|
31 | export interface ZoomScale {
|
32 | domain(): number[] | Date[];
|
33 | domain(domain: Array<Date | number>): this;
|
34 | range(): number[];
|
35 | range(range: number[]): this;
|
36 | copy(): ZoomScale;
|
37 | invert(value: number): number | Date;
|
38 | }
|
39 |
|
40 | // --------------------------------------------------------------------------
|
41 | // Zoom Behavior
|
42 | // --------------------------------------------------------------------------
|
43 |
|
44 | /**
|
45 | * A D3 Zoom Behavior
|
46 | *
|
47 | * The first generic refers to the type of reference element to which the zoom behavior is attached.
|
48 | * The second generic refers to the type of the datum of the reference element.
|
49 | */
|
50 | export interface ZoomBehavior<ZoomRefElement extends ZoomedElementBaseType, Datum> extends Function {
|
51 | /**
|
52 | * Applies this zoom behavior to the specified selection, binding the necessary event listeners to
|
53 | * allow panning and zooming, and initializing the zoom transform on each selected element to the identity transform if not already defined. This function is typically not invoked directly,
|
54 | * and is instead invoked via selection.call.
|
55 | *
|
56 | * For details see: {@link https://github.com/d3/d3-zoom#_zoom}
|
57 | *
|
58 | * @param selection A D3 selection of elements.
|
59 | * @param args Optional arguments to be passed in.
|
60 | */
|
61 | (selection: Selection<ZoomRefElement, Datum, any, any>, ...args: any[]): void;
|
62 | /**
|
63 | * If selection is a selection, sets the current zoom transform of the selected elements to the specified transform, instantaneously emitting start, zoom and end events.
|
64 | * If selection is a transition, defines a “zoom” tween to the specified transform using d3.interpolateZoom, emitting a start event when the transition starts,
|
65 | * zoom events for each tick of the transition, and then an end event when the transition ends (or is interrupted).
|
66 | * The transition will attempt to minimize the visual movement around the specified point; if the point is not specified, it defaults to the center of the viewport extent.
|
67 | *
|
68 | * This function is typically not invoked directly, and is instead invoked via selection.call or transition.call.
|
69 | *
|
70 | * @param selection A selection or a transition.
|
71 | * @param transform A zoom transform or a function that returns a zoom transform.
|
72 | * If a function, it is invoked for each selected element, being passed the current event (event) and datum d, with the this context as the current DOM element.
|
73 | * @param point A two-element array [x, y] or a function that returns such an array.
|
74 | * If a function, it is invoked for each selected element, being passed the current event (event) and datum d, with the this context as the current DOM element.
|
75 | */
|
76 | transform(
|
77 | selection: Selection<ZoomRefElement, Datum, any, any> | TransitionLike<ZoomRefElement, Datum>,
|
78 | transform: ZoomTransform | ((this: ZoomRefElement, event: any, d: Datum) => ZoomTransform),
|
79 | point?: [number, number] | ((this: ZoomRefElement, event: any, d: Datum) => [number, number])
|
80 | ): void;
|
81 |
|
82 | /**
|
83 | * If selection is a selection, translates the current zoom transform of the selected elements by x and y, such that the new tx1 = tx0 + kx and ty1 = ty0 + ky.
|
84 | * If selection is a transition, defines a “zoom” tween translating the current transform.
|
85 | * This method is a convenience method for zoom.transform.
|
86 | *
|
87 | * @param selection A selection or a transition.
|
88 | * @param x A number or a function that returns a number.
|
89 | * If a function, it is invoked for each selected element, being passed the current datum d and index i, with the this context as the current DOM element.
|
90 | * @param y A number or a function that returns a number.
|
91 | * If a function, it is invoked for each selected element, being passed the current datum d and index i, with the this context as the current DOM element.
|
92 | */
|
93 | translateBy(
|
94 | selection: Selection<ZoomRefElement, Datum, any, any> | TransitionLike<ZoomRefElement, Datum>,
|
95 | x: number | ValueFn<ZoomRefElement, Datum, number>,
|
96 | y: number | ValueFn<ZoomRefElement, Datum, number>
|
97 | ): void;
|
98 |
|
99 | /**
|
100 | * If selection is a selection, translates the current zoom transform of the selected elements such that the given position ⟨x,y⟩ appears at given point p.
|
101 | * The new tx = px - kx and ty = py - ky. If p is not specified, it defaults to the center of the viewport extent.
|
102 | * If selection is a transition, defines a “zoom” tween translating the current transform. This method is a convenience method for zoom.transform.
|
103 | *
|
104 | * Translates the current zoom transform of the selected elements such that the specified position ⟨x,y⟩ appears at the center of the viewport extent.
|
105 | * The new tx = cx - kx and ty = cy - ky, where ⟨cx,cy⟩ is the center.
|
106 | *
|
107 | * x is provided as a constant for all elements.
|
108 | * y is provided as a constant for all elements.
|
109 | *
|
110 | * @param selection A selection or a transition.
|
111 | * @param x A number or a function that returns a number.
|
112 | * If a function, it is invoked for each selected element, being passed the current datum d and index i, with the this context as the current DOM element.
|
113 | * @param y A number or a function that returns a number.
|
114 | * If a function, it is invoked for each selected element, being passed the current datum d and index i, with the this context as the current DOM element.
|
115 | * @param p A two-element array [px,py] or a function
|
116 | * If a function, it is invoked for each selected element, being passed the current datum d and index i, with the this context as the current DOM element.
|
117 | */
|
118 | translateTo(
|
119 | selection: Selection<ZoomRefElement, Datum, any, any> | TransitionLike<ZoomRefElement, Datum>,
|
120 | x: number | ValueFn<ZoomRefElement, Datum, number>,
|
121 | y: number | ValueFn<ZoomRefElement, Datum, number>,
|
122 | p?: [number, number] | ValueFn<ZoomRefElement, Datum, [number, number]>
|
123 | ): void;
|
124 |
|
125 | /**
|
126 | * If selection is a selection, scales the current zoom transform of the selected elements by k, such that the new k₁ = k₀k.
|
127 | * The reference point p does move.
|
128 | * If p is not specified, it defaults to the center of the viewport extent.
|
129 | * If selection is a transition, defines a “zoom” tween translating the current transform.
|
130 | * This method is a convenience method for zoom.transform.
|
131 | *
|
132 | * @param selection A selection or a transition.
|
133 | * @param k Scale factor. A number or a function that returns a number.
|
134 | * If a function, it is invoked for each selected element, being passed the current datum d and index i, with the this context as the current DOM element.
|
135 | * @param p A two-element array [px,py] or a function.
|
136 | * If a function, it is invoked for each selected element, being passed the current datum d and index i, with the this context as the current DOM element.
|
137 | */
|
138 | scaleBy(
|
139 | selection: Selection<ZoomRefElement, Datum, any, any> | TransitionLike<ZoomRefElement, Datum>,
|
140 | k: number | ValueFn<ZoomRefElement, Datum, number>,
|
141 | p?: [number, number] | ValueFn<ZoomRefElement, Datum, [number, number]>
|
142 | ): void;
|
143 |
|
144 | /**
|
145 | * If selection is a selection, scales the current zoom transform of the selected elements to k, such that the new k₁ = k.
|
146 | * The reference point p does move.
|
147 | * If p is not specified, it defaults to the center of the viewport extent.
|
148 | * If selection is a transition, defines a “zoom” tween translating the current transform.
|
149 | * This method is a convenience method for zoom.transform.
|
150 | *
|
151 | * @param selection: A selection or a transition.
|
152 | * @param k Scale factor. A number or a function that returns a number.
|
153 | * If a function, it is invoked for each selected element, being passed the current datum d and index i, with the this context as the current DOM element.
|
154 | * @param p A two-element array [px,py] or a function.
|
155 | * If a function, it is invoked for each selected element, being passed the current datum d and index i, with the this context as the current DOM element.
|
156 | */
|
157 | scaleTo(
|
158 | selection: Selection<ZoomRefElement, Datum, any, any> | TransitionLike<ZoomRefElement, Datum>,
|
159 | k: number | ValueFn<ZoomRefElement, Datum, number>,
|
160 | p?: [number, number]
|
161 | ): void;
|
162 |
|
163 | /**
|
164 | * Returns the current constraint function.
|
165 | * The default implementation attempts to ensure that the viewport extent does not go outside the translate extent.
|
166 | */
|
167 | constrain(): (transform: ZoomTransform, extent: [[number, number], [number, number]], translateExtent: [[number, number], [number, number]]) => ZoomTransform;
|
168 | /**
|
169 | * Sets the transform constraint function to the specified function and returns the zoom behavior.
|
170 | *
|
171 | * @param constraint A constraint function which returns a transform given the current transform, viewport extent and translate extent.
|
172 | * The default implementation attempts to ensure that the viewport extent does not go outside the translate extent.
|
173 | */
|
174 | constrain(constraint: ((transform: ZoomTransform, extent: [[number, number], [number, number]], translateExtent: [[number, number], [number, number]]) => ZoomTransform)): this;
|
175 |
|
176 | /**
|
177 | * Returns the current filter function.
|
178 | */
|
179 | filter(): (this: ZoomRefElement, event: any, datum: Datum) => boolean;
|
180 | /**
|
181 | * Sets the filter to the specified filter function and returns the zoom behavior.
|
182 | * The filter function is invoked in the zoom initiating event handlers of each element to which the zoom behavior was applied.
|
183 | *
|
184 | * If the filter returns falsey, the initiating event is ignored and no zoom gesture is started.
|
185 | * Thus, the filter determines which input events are ignored. The default filter ignores mousedown events on secondary buttons,
|
186 | * since those buttons are typically intended for other purposes, such as the context menu.
|
187 | *
|
188 | * @param filter A filter function which is invoked in the zoom initiating event handlers of each element to which the zoom behavior was applied,
|
189 | * in order, being passed the current event (event) and datum d, with the this context as the current DOM element.
|
190 | * The function returns a boolean value.
|
191 | */
|
192 | filter(filter: (this: ZoomRefElement, event: any, datum: Datum) => boolean): this;
|
193 |
|
194 | /**
|
195 | * Returns the current touch support detector, which defaults to a function returning true,
|
196 | * if the "ontouchstart" event is supported on the current element.
|
197 | */
|
198 | touchable(): ValueFn<ZoomRefElement, Datum, boolean>;
|
199 | /**
|
200 | * Sets the touch support detector to the specified boolean value and returns the zoom behavior.
|
201 | *
|
202 | * Touch event listeners are only registered if the detector returns truthy for the corresponding element when the zoom behavior is applied.
|
203 | * The default detector works well for most browsers that are capable of touch input, but not all; Chrome’s mobile device emulator, for example,
|
204 | * fails detection.
|
205 | *
|
206 | * @param touchable A boolean value. true when touch event listeners should be applied to the corresponding element, otherwise false.
|
207 | */
|
208 | touchable(touchable: boolean): this;
|
209 | /**
|
210 | * Sets the touch support detector to the specified function and returns the zoom behavior.
|
211 | *
|
212 | * Touch event listeners are only registered if the detector returns truthy for the corresponding element when the zoom behavior is applied.
|
213 | * The default detector works well for most browsers that are capable of touch input, but not all; Chrome’s mobile device emulator, for example,
|
214 | * fails detection.
|
215 | *
|
216 | * @param touchable A touch support detector function, which returns true when touch event listeners should be applied to the corresponding element.
|
217 | * The function is evaluated for each selected element to which the zoom behavior was applied, in order, being passed the current datum (d),
|
218 | * the current index (i), and the current group (nodes), with this as the current DOM element. The function returns a boolean value.
|
219 | */
|
220 | touchable(touchable: ValueFn<ZoomRefElement, Datum, boolean>): this;
|
221 |
|
222 | /**
|
223 | * Returns the current wheelDelta function.
|
224 | */
|
225 | wheelDelta(): ValueFn<ZoomRefElement, Datum, number>;
|
226 | /**
|
227 | * Sets the wheel delta function to the specified function and returns the zoom behavior. The wheel delta function which is invoked in the wheel event handler
|
228 | * of each element to which the zoom behavior was applied.
|
229 | * The value Δ returned by the wheel delta function determines the amount of scaling applied in response to a WheelEvent.
|
230 | * The scale factor transform.k is multiplied by 2Δ; for example, a Δ of +1 doubles the scale factor, Δ of -1 halves the scale factor.
|
231 | *
|
232 | * @param delta Wheel delta function which is invoked in the wheel event handler of each element to which the zoom behavior was applied,
|
233 | * in order, being passed the wheel event that triggered the handler,
|
234 | * with this as the current DOM element. The function returns a numeric value.
|
235 | */
|
236 | wheelDelta(delta: ((event: WheelEvent) => number) | number): this;
|
237 |
|
238 | /**
|
239 | * Return the current extent accessor, which defaults to [[0, 0], [width, height]] where width is the client width of the element and height is its client height;
|
240 | * for SVG elements, the nearest ancestor SVG element’s width and height is used. In this case,
|
241 | * the owner SVG element must have defined width and height attributes rather than (for example) relying on CSS properties or the viewBox attribute;
|
242 | * SVG provides no programmatic method for retrieving the initial viewport size. Alternatively, consider using element.getBoundingClientRect.
|
243 | * (In Firefox, element.clientWidth and element.clientHeight is zero for SVG elements!)
|
244 | */
|
245 | extent(): (this: ZoomRefElement, datum: Datum) => [[number, number], [number, number]];
|
246 | /**
|
247 | * Set the viewport extent to the specified array of points [[x0, y0], [x1, y1]],
|
248 | * where [x0, y0] is the top-left corner of the viewport and [x1, y1] is the bottom-right corner of the viewport,
|
249 | * and return this zoom behavior.
|
250 | *
|
251 | * The viewport extent affects several functions: the center of the viewport remains fixed during changes by zoom.scaleBy and zoom.scaleTo;
|
252 | * the viewport center and dimensions affect the path chosen by d3.interpolateZoom; and the viewport extent is needed to enforce the optional translate extent.
|
253 | *
|
254 | * @param extent An extent specified as an array of two coordinates.
|
255 | */
|
256 | extent(extent: [[number, number], [number, number]]): this;
|
257 | /**
|
258 | * Set the viewport extent to the array of points [[x0, y0], [x1, y1]] returned by the
|
259 | * extent accessor function, and return this zoom behavior.
|
260 | * The extent accessor function is evaluated for each element.
|
261 | *
|
262 | * [x0, y0] is the top-left corner of the viewport and [x1, y1] is the bottom-right corner of the viewport.
|
263 | *
|
264 | * The viewport extent affects several functions: the center of the viewport remains fixed during changes by zoom.scaleBy and zoom.scaleTo;
|
265 | * the viewport center and dimensions affect the path chosen by d3.interpolateZoom; and the viewport extent is needed to enforce the optional translate extent.
|
266 | *
|
267 | * The default is [[0, 0], [width, height]] where width is the client width of the element and height is its client height;
|
268 | * for SVG elements, the nearest ancestor SVG element’s width and height is used.
|
269 | * In this case, the owner SVG element must have defined width and height attributes rather than (for example) relying on CSS properties or the viewBox attribute;
|
270 | * SVG provides no programmatic method for retrieving the initial viewport size. Alternatively, consider using element.getBoundingClientRect.
|
271 | * (In Firefox, element.clientWidth and element.clientHeight is zero for SVG elements!)
|
272 | *
|
273 | * @extent An extent accessor function which is evaluated for each selected element, being passed the current datum d, with the this context as the current DOM element.
|
274 | * The function returns the extent array.
|
275 | */
|
276 | extent(extent: (this: ZoomRefElement, datum: Datum) => [[number, number], [number, number]]): this;
|
277 |
|
278 | /**
|
279 | * Return the current scale extent.
|
280 | */
|
281 | scaleExtent(): [number, number];
|
282 | /**
|
283 | * Set the scale extent to the specified array of numbers [k0, k1] where k0 is the minimum allowed scale factor and k1 is the maximum allowed scale factor,
|
284 | * and return this zoom behavior.
|
285 | *
|
286 | * The scale extent restricts zooming in and out. It is enforced on interaction and when using zoom.scaleBy, zoom.scaleTo and zoom.translateBy;
|
287 | * however, it is not enforced when using zoom.transform to set the transform explicitly.
|
288 | *
|
289 | * The default scale extent is [0, infinity].
|
290 | *
|
291 | * If the user tries to zoom by wheeling when already at the corresponding limit of the scale extent, the wheel events will be ignored and not initiate a zoom gesture.
|
292 | * This allows the user to scroll down past a zoomable area after zooming in, or to scroll up after zooming out.
|
293 | * If you would prefer to always prevent scrolling on wheel input regardless of the scale extent, register a wheel event listener to prevent the browser default behavior
|
294 | *
|
295 | * @param extent A scale extent array of two numbers representing the scale boundaries.
|
296 | */
|
297 | scaleExtent(extent: [number, number]): this;
|
298 |
|
299 | /**
|
300 | * Return the current translate extent.
|
301 | */
|
302 | translateExtent(): [[number, number], [number, number]];
|
303 | /**
|
304 | * Set the translate extent to the specified array of points [[x0, y0], [x1, y1]], where [x0, y0] is the top-left corner of the world and [x1, y1]
|
305 | * is the bottom-right corner of the world, and return this zoom behavior.
|
306 | *
|
307 | * The translate extent restricts panning, and may cause translation on zoom out. It is enforced on interaction and when using zoom.scaleBy, zoom.scaleTo and zoom.translateBy;
|
308 | * however, it is not enforced when using zoom.transform to set the transform explicitly.
|
309 | *
|
310 | * The default scale extent is [[-infinity, infinity], [-infinity, infinity]].
|
311 | *
|
312 | * @param extent A translate extent array, i.e. an array of two arrays, each representing a point.
|
313 | */
|
314 | translateExtent(extent: [[number, number], [number, number]]): this;
|
315 |
|
316 | /**
|
317 | * Return the current click distance threshold, which defaults to zero.
|
318 | */
|
319 | clickDistance(): number;
|
320 | /**
|
321 | * Set the maximum distance that the mouse can move between mousedown and mouseup that will trigger
|
322 | * a subsequent click event. If at any point between mousedown and mouseup the mouse is greater than or equal to
|
323 | * distance from its position on mousedown, the click event following mouseup will be suppressed.
|
324 | *
|
325 | * @param distance The distance threshold between mousedown and mouseup measured in client coordinates (event.clientX and event.clientY).
|
326 | * The default is zero.
|
327 | */
|
328 | clickDistance(distance: number): this;
|
329 |
|
330 | /**
|
331 | * Return the current tap distance threshold, which defaults to 10.
|
332 | */
|
333 | tapDistance(): number;
|
334 | /**
|
335 | * Sets the maximum distance that a double-tap gesture can move between first touchstart and second touchend that will trigger a subsequent double-click event.
|
336 | *
|
337 | * @param distance The distance threshold between mousedown and mouseup measured in client coordinates (event.clientX and event.clientY).
|
338 | * The default is 10.
|
339 | */
|
340 | tapDistance(distance: number): this;
|
341 |
|
342 | /**
|
343 | * Get the duration for zoom transitions on double-click and double-tap in milliseconds.
|
344 | */
|
345 | duration(): number;
|
346 | /**
|
347 | * Set the duration for zoom transitions on double-click and double-tap to the specified number of milliseconds and returns the zoom behavior.
|
348 | *
|
349 | * To disable double-click and double-tap transitions, you can remove the zoom behavior’s dblclick event listener after applying the zoom behavior to the selection.
|
350 | *
|
351 | * @param duration in milliseconds.
|
352 | */
|
353 | duration(duration: number): this;
|
354 |
|
355 | /**
|
356 | * Returns the current interpolation factory, which defaults to d3.interpolateZoom to implement smooth zooming.
|
357 | */
|
358 | // tslint:disable-next-line:no-unnecessary-generics
|
359 | interpolate<InterpolationFactory extends (a: ZoomView, b: ZoomView) => ((t: number) => ZoomView)>(): InterpolationFactory;
|
360 |
|
361 | /**
|
362 | * Sets the interpolation factory for zoom transitions to the specified function.
|
363 | * Use the default d3.interpolateZoom to implement smooth zooming.
|
364 | * To apply direct interpolation between two views, try d3.interpolate instead.
|
365 | *
|
366 | * Each view is defined as an array of three numbers: cx, cy and width. The first two coordinates cx, cy represent the center of the viewport;
|
367 | * the last coordinate width represents the size of the viewport.
|
368 | *
|
369 | * @param interpolatorFactory An interpolator factory to be used to generate interpolators between zooms for transitions.
|
370 | */
|
371 | interpolate(interpolatorFactory: (a: ZoomView, b: ZoomView) => ((t: number) => ZoomView)): this;
|
372 |
|
373 | /**
|
374 | * Return the first currently-assigned listener matching the specified typenames, if any.
|
375 | *
|
376 | * @param typenames The typenames is a string containing one or more typename separated by whitespace.
|
377 | * Each typename is a type, optionally followed by a period (.) and a name, such as "drag.foo"" and "drag.bar";
|
378 | * the name allows multiple listeners to be registered for the same type. The type must be one of the following:
|
379 | * start (after zooming begins [such as mousedown]), zoom (after a change to the zoom transform [such as mousemove], or
|
380 | * end (after an active pointer becomes inactive [such as on mouseup].)
|
381 | */
|
382 | on(typenames: string): ((this: ZoomRefElement, event: any, d: Datum) => void) | undefined;
|
383 | /**
|
384 | * Remove the current event listeners for the specified typenames, if any, return the drag behavior.
|
385 | *
|
386 | * @param typenames The typenames is a string containing one or more typename separated by whitespace.
|
387 | * Each typename is a type, optionally followed by a period (.) and a name, such as "drag.foo"" and "drag.bar";
|
388 | * the name allows multiple listeners to be registered for the same type. The type must be one of the following:
|
389 | * start (after zooming begins [such as mousedown]), zoom (after a change to the zoom transform [such as mousemove], or
|
390 | * end (after an active pointer becomes inactive [such as on mouseup].)
|
391 | * @param listener Use null to remove the listener.
|
392 | */
|
393 | on(typenames: string, listener: null): this;
|
394 | /**
|
395 | * Set the event listener for the specified typenames and return the zoom behavior.
|
396 | * If an event listener was already registered for the same type and name,
|
397 | * the existing listener is removed before the new listener is added.
|
398 | * When a specified event is dispatched, each listener will be invoked with the same context and arguments as selection.on listeners.
|
399 | *
|
400 | * @param typenames The typenames is a string containing one or more typename separated by whitespace.
|
401 | * Each typename is a type, optionally followed by a period (.) and a name, such as "drag.foo"" and "drag.bar";
|
402 | * the name allows multiple listeners to be registered for the same type. The type must be one of the following:
|
403 | * start (after zooming begins [such as mousedown]), zoom (after a change to the zoom transform [such as mousemove], or
|
404 | * end (after an active pointer becomes inactive [such as on mouseup].)
|
405 | * @param listener An event listener function which is evaluated for each selected element,
|
406 | * in order, being passed the current event (event) and datum d, with the this context as the current DOM element.
|
407 | */
|
408 | on(typenames: string, listener: (this: ZoomRefElement, event: any, d: Datum) => void): this;
|
409 | }
|
410 |
|
411 | /**
|
412 | * Creates a new zoom behavior. The returned behavior, zoom, is both an object and a function,
|
413 | * and is typically applied to selected elements via selection.call.
|
414 | *
|
415 | * The first generic refers to the type of reference element to which the zoom behavior is attached.
|
416 | * The second generic refers to the type of the datum of the reference element.
|
417 | */
|
418 | // tslint:disable-next-line:no-unnecessary-generics
|
419 | export function zoom<ZoomRefElement extends ZoomedElementBaseType, Datum>(): ZoomBehavior<ZoomRefElement, Datum>;
|
420 |
|
421 | // --------------------------------------------------------------------------
|
422 | // Zoom Event
|
423 | // --------------------------------------------------------------------------
|
424 |
|
425 | /**
|
426 | * A D3 Zoom Event
|
427 | *
|
428 | * The first generic refers to the type of reference element to which the zoom behavior is attached.
|
429 | * The second generic refers to the type of the datum of the reference element.
|
430 | */
|
431 | export interface D3ZoomEvent<ZoomRefElement extends ZoomedElementBaseType, Datum> {
|
432 | /**
|
433 | * The ZoomBehavior associated with the event
|
434 | */
|
435 | target: ZoomBehavior<ZoomRefElement, Datum>;
|
436 | /**
|
437 | * The event type for the zoom event
|
438 | */
|
439 | type: 'start' | 'zoom' | 'end' | string; // Leave failsafe string type for cases like 'zoom.foo'
|
440 | /**
|
441 | * The current zoom transform
|
442 | */
|
443 | transform: ZoomTransform;
|
444 | /**
|
445 | * The underlying input event, such as mousemove or touchmove.
|
446 | */
|
447 | sourceEvent: any;
|
448 | }
|
449 |
|
450 | // --------------------------------------------------------------------------
|
451 | // Zoom Transforms
|
452 | // --------------------------------------------------------------------------
|
453 |
|
454 | /**
|
455 | * A zoom transform
|
456 | *
|
457 | * The zoom behavior stores the zoom state on the element to which the zoom behavior was applied, not on the zoom behavior itself.
|
458 | * This is because the zoom behavior can be applied to many elements simultaneously, and each element can be zoomed independently.
|
459 | * The zoom state can change either on user interaction or programmatically via zoom.transform.
|
460 | *
|
461 | * To retrieve the zoom state, use event.transform on the current zoom event within a zoom event listener (see zoom.on), or use d3.zoomTransform for a given node.
|
462 | * The latter is particularly useful for modifying the zoom state programmatically,
|
463 | * say to implement buttons for zooming in and out.
|
464 | *
|
465 | * For details see {@link https://github.com/d3/d3-zoom#zoom-transforms}
|
466 | */
|
467 | export class ZoomTransform {
|
468 | /**
|
469 | * Returns a transform with scale k and translation (x, y).
|
470 | */
|
471 | constructor(k: number, x: number, y: number);
|
472 |
|
473 | /**
|
474 | * The translation amount tx along the x-axis.
|
475 | * This property should be considered read-only; instead of mutating a transform,
|
476 | * use transform.scale and transform.translate to derive a new transform.
|
477 | * Also see zoom.scaleBy, zoom.scaleTo and zoom.translateBy for convenience methods on the zoom behavior.
|
478 | */
|
479 | readonly x: number;
|
480 |
|
481 | /**
|
482 | * The translation amount ty along the y-axis
|
483 | * This property should be considered read-only; instead of mutating a transform,
|
484 | * use transform.scale and transform.translate to derive a new transform.
|
485 | * Also see zoom.scaleBy, zoom.scaleTo and zoom.translateBy for convenience methods on the zoom behavior.
|
486 | */
|
487 | readonly y: number;
|
488 |
|
489 | /**
|
490 | * The scale factor k.
|
491 | * This property should be considered read-only; instead of mutating a transform,
|
492 | * use transform.scale and transform.translate to derive a new transform.
|
493 | * Also see zoom.scaleBy, zoom.scaleTo and zoom.translateBy for convenience methods on the zoom behavior.
|
494 | */
|
495 | readonly k: number;
|
496 |
|
497 | /**
|
498 | * Return the transformation of the specified point which is a two-element array of numbers [x, y].
|
499 | * The returned point is equal to [xk + tx, yk + ty].
|
500 | *
|
501 | * @param point Point coordinates [x, y]
|
502 | */
|
503 | apply(point: [number, number]): [number, number];
|
504 |
|
505 | /**
|
506 | * Return the transformation of the specified x-coordinate, xk + tx.
|
507 | *
|
508 | * @param x Value of x-coordinate.
|
509 | */
|
510 | applyX(x: number): number;
|
511 |
|
512 | /**
|
513 | * Return the transformation of the specified y-coordinate, yk + ty.
|
514 | *
|
515 | * @param y Value of y-coordinate.
|
516 | */
|
517 | applyY(y: number): number;
|
518 |
|
519 | /**
|
520 | * Return the inverse transformation of the specified point which is a two-element array of numbers [x, y].
|
521 | * The returned point is equal to [(x - tx) / k, (y - ty) / k].
|
522 | *
|
523 | * @param point Point coordinates [x, y]
|
524 | */
|
525 | invert(point: [number, number]): [number, number];
|
526 |
|
527 | /**
|
528 | * Return the inverse transformation of the specified x-coordinate, (x - tx) / k.
|
529 | *
|
530 | * @param x Value of x-coordinate.
|
531 | */
|
532 | invertX(x: number): number;
|
533 |
|
534 | /**
|
535 | * Return the inverse transformation of the specified y-coordinate, (y - ty) / k.
|
536 | *
|
537 | * @param y Value of y-coordinate.
|
538 | */
|
539 | invertY(y: number): number;
|
540 |
|
541 | /**
|
542 | * Returns a copy of the continuous scale x whose domain is transformed.
|
543 | * This is implemented by first applying the inverse x-transform on the scale’s range,
|
544 | * and then applying the inverse scale to compute the corresponding domain
|
545 | *
|
546 | * The scale x must use d3.interpolateNumber; do not use continuous.rangeRound as this
|
547 | * reduces the accuracy of continuous.invert and can lead to an inaccurate rescaled domain.
|
548 | * This method does not modify the input scale x; x thus represents the untransformed scale,
|
549 | * while the returned scale represents its transformed view.
|
550 | *
|
551 | * @param xScale A continuous scale for x-dimension.
|
552 | */
|
553 | rescaleX<S extends ZoomScale>(xScale: S): S;
|
554 |
|
555 | /**
|
556 | * Returns a copy of the continuous scale y whose domain is transformed.
|
557 | * This is implemented by first applying the inverse y-transform on the scale’s range,
|
558 | * and then applying the inverse scale to compute the corresponding domain
|
559 | *
|
560 | * The scale y must use d3.interpolateNumber; do not use continuous.rangeRound as this
|
561 | * reduces the accuracy of continuous.invert and can lead to an inaccurate rescaled domain.
|
562 | * This method does not modify the input scale x; x thus represents the untransformed scale,
|
563 | * while the returned scale represents its transformed view.
|
564 | *
|
565 | * @param yScale A continuous scale for y-dimension.
|
566 | */
|
567 | rescaleY<S extends ZoomScale>(yScale: S): S;
|
568 |
|
569 | /**
|
570 | * Return a transform whose scale k1 is equal to k0 × k, where k0 is this transform’s scale.
|
571 | *
|
572 | * @param k A scale factor.
|
573 | */
|
574 | scale(k: number): ZoomTransform;
|
575 |
|
576 | /**
|
577 | * Return a string representing the SVG transform corresponding to this transform.
|
578 | */
|
579 | toString(): string;
|
580 |
|
581 | /**
|
582 | * Returns a transform whose translation tx1 and ty1 is equal to tx0 + tkx and ty0 + tky,
|
583 | * where tx0 and ty0 is this transform’s translation and tk is this transform’s scale.
|
584 | *
|
585 | * @param x Amount of translation in x-direction.
|
586 | * @param y Amount of translation in y-direction.
|
587 | */
|
588 | translate(x: number, y: number): ZoomTransform;
|
589 | }
|
590 |
|
591 | /**
|
592 | * Returns the current transform for the specified node. Note that node should typically be a DOM element, and not a selection.
|
593 | * (A selection may consist of multiple nodes, in different states, and this function only returns a single transform.) If you have a selection, call selection.node first.
|
594 | * In the context of an event listener, the node is typically the element that received the input event (which should be equal to event.transform), "this".
|
595 | * Internally, an element’s transform is stored as element.__zoom; however, you should use this method rather than accessing it directly.
|
596 | * If the given node has no defined transform, returns the identity transformation.
|
597 | * The returned transform represents a two-dimensional transformation matrix
|
598 | *
|
599 | * For details see {@link https://github.com/d3/d3-zoom#zoom-transforms}
|
600 | *
|
601 | * @param node An element for which to retrieve its current zoom transform.
|
602 | */
|
603 | export function zoomTransform(node: ZoomedElementBaseType): ZoomTransform;
|
604 |
|
605 | /**
|
606 | * The identity transform, where k = 1, tx = ty = 0.
|
607 | */
|
608 | export const zoomIdentity: ZoomTransform;
|
609 |
|
\ | No newline at end of file |