UNPKG

22.7 kBTypeScriptView Raw
1// Type definitions for D3JS d3-chord module 3.0
2// Project: https://github.com/d3/d3-chord/, https://d3js.org/d3-chord
3// Definitions by: Tom Wanzek <https://github.com/tomwanzek>
4// Alex Ford <https://github.com/gustavderdrache>
5// Boris Yankov <https://github.com/borisyankov>
6// Nathan Bierema <https://github.com/Methuselah96>
7// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
8
9// Last module patch version validated against: 3.0.1
10
11// ---------------------------------------------------------------------
12// Chord
13// ---------------------------------------------------------------------
14
15/**
16 * A chord subgroup serving as source or target of a chord between two nodes i an j (where i may be equal to j).
17 */
18export interface ChordSubgroup {
19 /**
20 * Start angle of the chord subgroup in radians
21 */
22 startAngle: number;
23
24 /***
25 * End angle of the chord subgroup in radians
26 */
27 endAngle: number;
28
29 /**
30 * The flow value in matrix[i][j] from node i to node j
31 */
32 value: number;
33
34 /**
35 * The node index i
36 */
37 index: number;
38}
39
40/**
41 * A chord represents the combined bidirectional flow between two nodes i and j (where i may be equal to j)
42 */
43export interface Chord {
44 /**
45 * Chord subgroup constituting the source of Chord
46 */
47 source: ChordSubgroup;
48 /**
49 * Chord subgroup constituting the Target of Chord
50 */
51 target: ChordSubgroup;
52}
53
54/**
55 * A chord group for a given node i representing the combined outflow for node i,
56 * corresponding to the elements matrix[i][0 … n - 1].
57 */
58export interface ChordGroup {
59 /**
60 * The start angle of the chord group in radians
61 */
62 startAngle: number;
63
64 /**
65 * The end angle of the chord group in radians
66 */
67 endAngle: number;
68
69 /**
70 * The total outgoing flow value for node i
71 */
72 value: number;
73
74 /**
75 * The node index i
76 */
77 index: number;
78}
79
80/**
81 * An array of chords, where each chord represents the combined bidirectional flow between two nodes i and j (where i may be equal to j).
82 * The chords are based on a (n x n) matrix of flows between nodes.
83 *
84 * The chords are typically passed to d3.ribbon to display the network relationships.
85 * The returned array includes only chord objects for which the value matrix[i][j] or matrix[j][i] is non-zero.
86 * Furthermore, the returned array only contains unique chords: a given chord ij represents the bidirectional flow from i to j and from j to i,
87 * and does not contain a duplicate chord ji; i and j are chosen such that the chord’s source always represents the larger of matrix[i][j] and matrix[j][i].
88 * In other words, chord.source.index equals chord.target.subindex, chord.source.subindex equals chord.target.index,
89 * chord.source.value is greater than or equal to chord.target.value, and chord.source.value is always greater than zero.
90 */
91export interface Chords extends Array<Chord> {
92 /**
93 * An array of length n, where each group represents the combined outflow for node i,
94 * corresponding to the elements matrix[i][0 … n - 1]
95 */
96 groups: ChordGroup[];
97}
98
99/**
100 * A D3 chord diagram Layout to visualize relationships or network flow with an aesthetically-pleasing circular layout.
101 *
102 * The relationships are represented as a square matrix of size n×n, where the matrix represents the directed flow amongst a network (a complete digraph) of n nodes.
103 */
104export interface ChordLayout {
105 /**
106 * Computes the chord layout for the specified square matrix of size n×n, where the matrix represents the directed flow amongst a network (a complete digraph) of n nodes.
107 *
108 * @param matrix An (n x n) matrix representing the directed flow amongst a network (a complete digraph) of n nodes.The given matrix must be an array of length n,
109 * where each element matrix[i] is an array of n numbers, where each matrix[i][j] represents the flow from the ith node in the network to the jth node.
110 * Each number matrix[i][j] must be nonnegative, though it can be zero if there is no flow from node i to node j.
111 */
112 (matrix: number[][]): Chords;
113
114 /**
115 * Returns the current pad angle in radians, which defaults to zero.
116 */
117 padAngle(): number;
118 /**
119 * Sets the pad angle between adjacent groups to the specified number in radians and returns this chord layout.
120 *
121 * The default is zero.
122 *
123 * @param angle Pad angle between adjacent groups in radians.
124 */
125 padAngle(angle: number): this;
126
127 /**
128 * Returns the current group comparator, which defaults to null.
129 */
130 sortGroups(): ((a: number, b: number) => number) | null;
131 /**
132 * Sets the group comparator to the specified function or null and returns this chord layout.
133 * If the group comparator is non-null, it is used to sort the groups by their total outflow.
134 * See also d3.ascending and d3.descending.
135 */
136 sortGroups(compare: null | ((a: number, b: number) => number)): this;
137
138 /**
139 * Returns the current subgroup comparator, which defaults to null.
140 */
141 sortSubgroups(): ((a: number, b: number) => number) | null;
142 /**
143 * Sets the subgroup comparator to the specified function or null and returns this chord layout.
144 * If the subgroup comparator is non-null, it is used to sort the subgroups corresponding to matrix[i][0 … n - 1] for a given group i by their total outflow.
145 * See also d3.ascending and d3.descending.
146 */
147 sortSubgroups(compare: null | ((a: number, b: number) => number)): this;
148
149 /**
150 * Returns the current chord comparator, which defaults to null.
151 */
152 sortChords(): ((a: number, b: number) => number) | null;
153 /**
154 * Sets the chord comparator to the specified function or null and returns this chord layout.
155 * If the chord comparator is non-null, it is used to sort the chords by their combined flow; this only affects the z-order of the chords.
156 * See also d3.ascending and d3.descending.
157 */
158 sortChords(compare: null | ((a: number, b: number) => number)): this;
159}
160
161/**
162 * Constructs a new chord diagram layout with the default settings.
163 */
164export function chord(): ChordLayout;
165
166/**
167 * A chord layout for directional flows. The chord from i to j is generated from the value in matrix[i][j] only.
168 */
169export function chordDirected(): ChordLayout;
170
171/**
172 * A transposed chord layout. Useful to highlight outgoing (rather than incoming) flows.
173 */
174export function chordTranspose(): ChordLayout;
175
176// ---------------------------------------------------------------------
177// Ribbon
178// ---------------------------------------------------------------------
179
180/**
181 * A minimal interface to support the default accessors used by RibbonGenerator for properties of
182 * source and target objects of a Ribbon.
183 *
184 * (Corresponds to ChordSubgroup)
185 */
186export interface RibbonSubgroup {
187 /**
188 * Start angle of the ribbon subgroup in radians
189 */
190 startAngle: number;
191 /**
192 * End angle of the ribbon subgroup in radians
193 */
194 endAngle: number;
195 /**
196 * Radius of the ribbon subgroup
197 */
198 radius: number;
199}
200
201/**
202 * A minimal interface to support the default source and target accessors used by RibbonGenerator.
203 * (Corresponds to Chord)
204 */
205export interface Ribbon {
206 /**
207 * Ribbon subgroup constituting the source of the Ribbon
208 */
209 source: RibbonSubgroup;
210 /**
211 * Ribbon subgroup constituting the target of the Ribbon
212 */
213 target: RibbonSubgroup;
214}
215
216/**
217 *
218 * A ribbon generator to support rendering of chords in a chord diagram.
219 *
220 * The first generic corresponds to the type of the "this" context within which the ribbon generator and its accessor functions will be invoked.
221 *
222 * The second generic corresponds to the datum type representing a chord for which the ribbon is to be generated. The default type is Ribbon.
223 *
224 * The third generic corresponds to the datum type of the chord subgroup, i.e. source or target of the cord. The default type is RibbonSubgroup.
225 */
226export interface RibbonGenerator<This, RibbonDatum, RibbonSubgroupDatum> {
227 /**
228 * Generates a ribbon for the given arguments.
229 *
230 * IMPORTANT: If the ribbon generator has been configured with a rendering context,
231 * then the ribbon is rendered to this context as a sequence of path method calls and this function returns void.
232 *
233 * The "this" context within which this function is invoked, will be the context within which the accessor methods of the generator are invoked.
234 * All arguments passed into this function, will be passed to the accessor functions of the generator.
235 *
236 * @param d The datum representing the chord for which the ribbon is to be generated.
237 */
238 (this: This, d: RibbonDatum, ...args: any[]): void;
239 /**
240 * Generates a ribbon for the given arguments.
241 *
242 * IMPORTANT: If the rendering context of the ribbon generator is null,
243 * then the ribbon is returned as a path data string.
244 *
245 * The "this" context within which this function is invoked, will be the context within which the accessor methods of the generator are invoked.
246 * All arguments passed into this function, will be passed to the accessor functions of the generator.
247 *
248 * @param d The datum representing the chord for which the ribbon is to be generated.
249 */
250 (this: This, d: RibbonDatum, ...args: any[]): string | null;
251
252 /**
253 * Returns the current source accessor, which defaults to a function returning the "source" property of the first argument passed into the accessor.
254 */
255 source(): (this: This, d: RibbonDatum, ...args: any[]) => RibbonSubgroupDatum;
256 /**
257 * Sets the source accessor to the specified function and returns this ribbon generator.
258 *
259 * @param source An accessor function returning the source datum of the chord. The accessor function is invoked in the same "this" context as the generator was invoked in and
260 * receives the same arguments that were passed into the ribbon generator.
261 */
262 source(source: (this: This, d: RibbonDatum, ...args: any[]) => RibbonSubgroupDatum): this;
263
264 /**
265 * Returns the current target accessor, which defaults to a function returning the "target" property of the first argument passed into the accessor.
266 */
267 target(): (this: This, d: RibbonDatum, ...args: any[]) => RibbonSubgroupDatum;
268 /**
269 * Sets the target accessor to the specified function and returns this ribbon generator.
270 *
271 * @param target An accessor function returning the target datum of the chord. The accessor function is invoked in the same "this" context as the generator was invoked in and
272 * receives the same arguments that were passed into the ribbon generator.
273 */
274 target(target: (this: This, d: RibbonDatum, ...args: any[]) => RibbonSubgroupDatum): this;
275
276 /**
277 * Returns the current radius accessor, which defaults to a function returning the "radius" property (assumed to be a number) of the source or
278 * target object returned by the source or target accessor, respectively.
279 */
280 radius(): (this: This, d: RibbonSubgroupDatum, ...args: any[]) => number;
281 /**
282 * Sets the radius to a fixed number and returns this ribbon generator.
283 *
284 * @param radius A fixed numeric value for the radius.
285 */
286 radius(radius: number): this;
287 /**
288 * Sets the radius accessor to the specified function and returns this ribbon generator.
289 *
290 * @param radius An accessor function which is invoked for the source and target of the chord. The accessor function is invoked in the same "this" context as the generator was invoked in and
291 * receives as the first argument the source or target object returned by the respective source or target accessor function of the generator.
292 * It is also passed any additional arguments that were passed into the generator, with the exception of the first element representing the chord datum itself.
293 * The function returns the radius value.
294 */
295 radius(radius: (this: This, d: RibbonSubgroupDatum, ...args: any[]) => number): this;
296
297 /**
298 * Returns the current source radius accessor, which defaults to a function returning the "radius" property (assumed to be a number) of the source or
299 * target object returned by the source or target accessor, respectively.
300 */
301 sourceRadius(): (this: This, d: RibbonSubgroupDatum, ...args: any[]) => number;
302 /**
303 * Sets the source radius to a fixed number and returns this ribbon generator.
304 *
305 * @param radius A fixed numeric value for the source radius.
306 */
307 sourceRadius(radius: number): this;
308 /**
309 * Sets the source radius accessor to the specified function and returns this ribbon generator.
310 *
311 * @param radius An accessor function which is invoked for the source and target of the chord. The accessor function is invoked in the same "this" context as the generator was invoked in and
312 * receives as the first argument the source or target object returned by the respective source or target accessor function of the generator.
313 * It is also passed any additional arguments that were passed into the generator, with the exception of the first element representing the chord datum itself.
314 * The function returns the source radius value.
315 */
316 sourceRadius(radius: (this: This, d: RibbonSubgroupDatum, ...args: any[]) => number): this;
317
318 /**
319 * Returns the current target radius accessor, which defaults to a function returning the "radius" property (assumed to be a number) of the source or
320 * target object returned by the source or target accessor, respectively.
321 */
322 targetRadius(): (this: This, d: RibbonSubgroupDatum, ...args: any[]) => number;
323 /**
324 * Sets the target radius to a fixed number and returns this ribbon generator.
325 *
326 * @param radius A fixed numeric value for the target radius.
327 */
328 targetRadius(radius: number): this;
329 /**
330 * Sets the target radius accessor to the specified function and returns this ribbon generator.
331 *
332 * @param radius An accessor function which is invoked for the source and target of the chord. The accessor function is invoked in the same "this" context as the generator was invoked in and
333 * receives as the first argument the source or target object returned by the respective source or target accessor function of the generator.
334 * It is also passed any additional arguments that were passed into the generator, with the exception of the first element representing the chord datum itself.
335 * The function returns the target radius value.
336 */
337 targetRadius(radius: (this: This, d: RibbonSubgroupDatum, ...args: any[]) => number): this;
338
339 /**
340 * Returns the current start angle accessor, which defaults to a function returning the "startAngle" property (assumed to be a number in radians) of the source or
341 * target object returned by the source or target accessor, respectively.
342 */
343 startAngle(): (this: This, d: RibbonSubgroupDatum, ...args: any[]) => number;
344 /**
345 * Sets the start angle to a fixed number in radians and returns this ribbon generator.
346 *
347 * @param angle A fixed numeric value for the start angle in radians.
348 */
349 startAngle(angle: number): this;
350 /**
351 * Sets the start angle accessor to the specified function and returns this ribbon generator.
352 *
353 * @param angle An accessor function which is invoked for the source and target of the chord. The accessor function is invoked in the same "this" context as the generator was invoked in and
354 * receives as the first argument the source or target object returned by the respective source or target accessor function of the generator.
355 * It is also passed any additional arguments that were passed into the generator, with the exception of the first element representing the chord datum itself.
356 * The function returns the start angle in radians.
357 */
358 startAngle(angle: (this: This, d: RibbonSubgroupDatum, ...args: any[]) => number): this;
359
360 /**
361 * Returns the current end angle accessor, which defaults to a function returning the "endAngle" property (assumed to be a number in radians) of the source or
362 * target object returned by the source or target accessor, respectively.
363 */
364 endAngle(): (this: This, d: RibbonSubgroupDatum, ...args: any[]) => number;
365 /**
366 * Sets the end angle to a fixed number in radians and returns this ribbon generator.
367 *
368 * @param angle A fixed numeric value for the end angle in radians.
369 */
370 endAngle(angle: number): this;
371 /**
372 * Sets the end angle accessor to the specified function and returns this ribbon generator.
373 *
374 * @param angle An accessor function which is invoked for the source and target of the chord. The accessor function is invoked in the same "this" context as the generator was invoked in and
375 * receives as the first argument the source or target object returned by the respective source or target accessor function of the generator.
376 * It is also passed any additional arguments that were passed into the generator, with the exception of the first element representing the chord datum itself.
377 * The function returns the end angle in radians.
378 */
379 endAngle(angle: (this: This, d: RibbonSubgroupDatum, ...args: any[]) => number): this;
380
381 /**
382 * Returns the current pad angle accessor, which defaults to a function returning 0.
383 */
384 padAngle(): (this: This, d: RibbonSubgroupDatum, ...args: any[]) => number;
385 /**
386 * Sets the pad angle to a fixed number in radians and returns this ribbon generator.
387 *
388 * @param angle A fixed numeric value for the pad angle in radians.
389 */
390 padAngle(angle: number): this;
391 /**
392 * Sets the pad angle accessor to the specified function and returns this ribbon generator.
393 *
394 * @param angle An accessor function which is invoked for the source and target of the chord. The accessor function is invoked in the same "this" context as the generator was invoked in and
395 * receives as the first argument the source or target object returned by the respective source or target accessor function of the generator.
396 * It is also passed any additional arguments that were passed into the generator, with the exception of the first element representing the chord datum itself.
397 * The function returns the pad angle in radians.
398 */
399 padAngle(angle: (this: This, d: RibbonSubgroupDatum, ...args: any[]) => number): this;
400
401 /**
402 * Returns the current rendering context, which defaults to null.
403 */
404 context(): CanvasRenderingContext2D | null;
405 /**
406 * Sets the context and returns this ribbon generator.
407 * If the context is not null, then the generated ribbon is rendered to this context as a sequence of path method calls.
408 * Otherwise, a path data string representing the generated ribbon is returned.
409 * See also d3-path.
410 */
411 context(context: CanvasRenderingContext2D | null): this;
412}
413
414export interface RibbonArrowGenerator<This, RibbonDatum, RibbonSubgroupDatum> extends RibbonGenerator<This, RibbonDatum, RibbonSubgroupDatum> {
415 headRadius(): (this: This, d: RibbonSubgroupDatum, ...args: any[]) => number;
416
417 headRadius(radius: number): this;
418
419 headRadius(radius: (this: This, d: RibbonSubgroupDatum, ...args: any[]) => number): this;
420}
421
422/**
423 * Creates a new ribbon generator with the default settings.
424 */
425export function ribbon(): RibbonGenerator<any, Ribbon, RibbonSubgroup>;
426/**
427 * Creates a new ribbon generator with the default settings.
428 *
429 * Accessor functions must be configured for the ribbon generator, should the datum types differ from the defaults.
430 *
431 * The first generic corresponds to the datum type representing a chord for which the ribbon is to be generated. The default type is Chord.
432 *
433 * The second generic corresponds to the datum type of the chord subgroup, i.e. source or target of the cord. The default type is ChordSubgroup.
434 */
435// tslint:disable-next-line:no-unnecessary-generics
436export function ribbon<Datum, SubgroupDatum>(): RibbonGenerator<any, Datum, SubgroupDatum>;
437/**
438 * Creates a new ribbon generator with the default settings.
439 *
440 * Accessor functions must be configured for the ribbon generator, should the datum types differ from the defaults.
441 *
442 * The first generic corresponds to the type of the "this" context within which the ribbon generator and its accessor functions will be invoked.
443 *
444 * The second generic corresponds to the datum type representing a chord for which the ribbon is to be generated. The default type is Chord.
445 *
446 * The third generic corresponds to the datum type of the chord subgroup, i.e. source or target of the cord. The default type is ChordSubgroup.
447 */
448// tslint:disable-next-line:no-unnecessary-generics
449export function ribbon<This, Datum, SubgroupDatum>(): RibbonGenerator<This, Datum, SubgroupDatum>;
450
451/**
452 * Creates a new arrow ribbon generator with the default settings.
453 */
454export function ribbonArrow(): RibbonArrowGenerator<any, Ribbon, RibbonSubgroup>;
455/**
456 * Creates a new arrow ribbon generator with the default settings.
457 *
458 * Accessor functions must be configured for the ribbon generator, should the datum types differ from the defaults.
459 *
460 * The first generic corresponds to the datum type representing a chord for which the ribbon is to be generated. The default type is Chord.
461 *
462 * The second generic corresponds to the datum type of the chord subgroup, i.e. source or target of the cord. The default type is ChordSubgroup.
463 */
464// tslint:disable-next-line:no-unnecessary-generics
465export function ribbonArrow<Datum, SubgroupDatum>(): RibbonArrowGenerator<any, Datum, SubgroupDatum>;
466/**
467 * Creates a new arrow ribbon generator with the default settings.
468 *
469 * Accessor functions must be configured for the ribbon generator, should the datum types differ from the defaults.
470 *
471 * The first generic corresponds to the type of the "this" context within which the ribbon generator and its accessor functions will be invoked.
472 *
473 * The second generic corresponds to the datum type representing a chord for which the ribbon is to be generated. The default type is Chord.
474 *
475 * The third generic corresponds to the datum type of the chord subgroup, i.e. source or target of the cord. The default type is ChordSubgroup.
476 */
477// tslint:disable-next-line:no-unnecessary-generics
478export function ribbonArrow<This, Datum, SubgroupDatum>(): RibbonArrowGenerator<This, Datum, SubgroupDatum>;