@types/d3-transition

  • Version 2.0.0
  • Published
  • 40.9 kB
  • 1 dependency
  • MIT license

Install

npm i @types/d3-transition
yarn add @types/d3-transition
pnpm add @types/d3-transition

Overview

TypeScript definitions for D3JS d3-transition module

Index

Functions

function active

active: <GElement extends any, Datum, PElement extends any, PDatum>(
node: GElement,
name?: string
) => Transition<GElement, Datum, PElement, PDatum> | null;
  • Return the active transition on the specified node with the specified name, if any. If no name is specified, null is used. Returns null if there is no such active transition on the specified node. This method is useful for creating chained transitions.

    The first generic "GElement" refers to the type of element on which the returned active transition was defined. The second generic "Datum" refers to the type of the datum, of a selected element on which the transition is defined. The third generic refers to the type of the parent elements in the returned Transition. The fourth generic refers to the type of the datum defined on the parent elements in the returned Transition.

    Parameter node

    Element for which the active transition should be returned.

    Parameter name

    Name of the transition.

function interrupt

interrupt: (node: any, name?: string) => void;
  • Interrupts the active transition of the specified name on the specified node, and cancels any pending transitions with the specified name, if any. If a name is not specified, null is used.

    Parameter node

    Element for which the transition should be interrupted.

    Parameter name

    Name of the transition to be interrupted. If a name is not specified, null is used.

function transition

transition: {
<OldDatum>(name?: string): Transition<HTMLElement, OldDatum, null, undefined>;
<OldDatum>(transition: Transition<any, any, any, any>): Transition<
HTMLElement,
OldDatum,
null,
undefined
>;
};
  • Returns a new transition with the specified name. If a name is not specified, null is used. The new transition is only exclusive with other transitions of the same name.

    The generic "OldDatum" refers to the type of a previously-set datum of the selected HTML element in the Transition.

    Parameter name

    Name of the transition.

  • Returns a new transition from an existing transition.

    When using a transition instance, the returned transition has the same id and name as the specified transition.

    The generic "OldDatum" refers to the type of a previously-set datum of the selected HTML element in the Transition.

    Parameter transition

    A transition instance.

Interfaces

interface Transition

interface Transition<
GElement extends BaseType,
Datum,
PElement extends BaseType,
PDatum
> {}
  • A D3 Transition.

    The first generic "GElement" refers to the type of the selected element(s) in the Transition. The second generic "Datum" refers to the type of the datum of a selected element(s) in the Transition. The third generic "PElement" refers to the type of the parent element(s) in the D3 selection in the Transition. The fourth generic "PDatum" refers to the type of the datum of the parent element(s) in the Transition.

method attr

attr: {
(name: string, value: null): this;
(name: string, value: string | number | boolean): this;
(name: string, value: any): this;
};
  • For each selected element, the attribute with the specified name will be cleared at the start of the transition.

    Parameter name

    Name of the attribute.

    Parameter value

    Use null to clear the attribute.

  • For each selected element, assigns the attribute tween for the attribute with the specified name to the specified target value. The starting value of the tween is the attribute’s value when the transition starts. The target value is the specified constant value for all elements.

    An interpolator is chosen based on the type of the target value, using the following algorithm: 1.) If value is a number, use interpolateNumber. 2.) If value is a color or a string coercible to a color, use interpolateRgb. 3.) Use interpolateString.

    To apply a different interpolator, use transition.attrTween.

    Parameter name

    Name of the attribute.

    Parameter value

    Target value for the attribute.

  • For each selected element, assigns the attribute tween for the attribute with the specified name to the specified target value. The starting value of the tween is the attribute’s value when the transition starts. The target value is return value of the value function evaluated for the selected element.

    An interpolator is chosen based on the type of the target value, using the following algorithm: 1.) If value is a number, use interpolateNumber. 2.) If value is a color or a string coercible to a color, use interpolateRgb. 3.) Use interpolateString.

    To apply a different interpolator, use transition.attrTween.

    Parameter name

    Name of the attribute.

    Parameter value

    A value function which is evaluated for each selected element, in order, being passed the current datum (d), the current index (i), and the current group (nodes), with this as the current DOM element (nodes[i]). A null value will clear the attribute at the start of the transition.

method attrTween

attrTween: {
(name: string): any;
(name: string, factory: null): this;
(name: string, factory: any): this;
};
  • Return the current interpolator factory for attribute with the specified name, or undefined if no such tween exists.

    Parameter name

    Name of attribute.

  • Remove the previously-assigned attribute tween of the specified name, if any.

    Parameter name

    Name of attribute.

    Parameter factory

    Use null to remove previously-assigned attribute tween.

  • Assign the attribute tween for the attribute with the specified name to the specified interpolator factory. An interpolator factory is a function that returns an interpolator; when the transition starts, the factory is evaluated for each selected element. The returned interpolator will then be invoked for each frame of the transition, in order, being passed the eased time t, typically in the range [0, 1]. Lastly, the return value of the interpolator will be used to set the attribute value. The interpolator must return a string.

    Parameter name

    Name of attribute.

    Parameter factory

    An interpolator factory which is evaluated for each selected element, in order, being passed the current datum (d), the current index (i), and the current group (nodes), with this as the current DOM element (nodes[i]). The interpolator factory returns a string interpolator, which takes as its argument eased time t, typically in the range [0, 1] and returns the interpolated string.

method call

call: (
func: (
transition: Transition<GElement, Datum, PElement, PDatum>,
...args: any[]
) => any,
...args: any[]
) => this;
  • Invoke the specified function exactly once, passing in this transition along with any optional arguments. Returns this transition.

    Parameter func

    A function which is passed this transition as the first argument along with any optional arguments.

    Parameter args

    List of optional arguments to be passed to the callback function.

method delay

delay: { (): number; (milliseconds: number): this; (milliseconds: any): this };
  • Returns the current value of the delay for the first (non-null) element in the transition. This is generally useful only if you know that the transition contains exactly one element.

  • For each selected element, sets the transition delay to the specified value in milliseconds. If a delay is not specified, it defaults to zero.

    Parameter milliseconds

    Number of milliseconds for the delay.

  • For each selected element, sets the transition delay to the value in milliseconds returned by the value function.

    Parameter milliseconds

    A value function which is evaluated for each selected element, being passed the current datum (d), the current index (i), and the current group (nodes), with this of the current DOM element (nodes[i]). The return value is a number specifying the delay in milliseconds.

method duration

duration: {
(): number;
(milliseconds: number): this;
(milliseconds: any): this;
};
  • Returns the current value of the duration for the first (non-null) element in the transition. This is generally useful only if you know that the transition contains exactly one element.

  • For each selected element, sets the transition duration to the specified value in milliseconds. If a duration is not specified, it defaults to 250ms.

    Parameter duration

    Number of milliseconds for the duration.

  • For each selected element, sets the transition duration to the value in milliseconds returned by the value function.

    Parameter milliseconds

    A value function which is evaluated for each selected element, being passed the current datum (d), the current index (i), and the current group (nodes), with this of the current DOM element (nodes[i]). The return value is a number specifying the duration in milliseconds.

method each

each: (func: any) => this;
  • Invoke the specified function for each selected element, passing the current datum (d), the current index (i), and the current group (nodes), with this of the current DOM element (nodes[i]). This method can be used to invoke arbitrary code for each selected element, and is useful for creating a context to access parent and child data simultaneously.

    Parameter func

    A function which is invoked for each selected element, being passed the current datum (d), the current index (i), and the current group (nodes), with this of the current DOM element (nodes[i]).

method ease

ease: {
(): (normalizedTime: number) => number;
(easingFn: (normalizedTime: number) => number): this;
};
  • Returns the current easing function for the first (non-null) element in the transition. This is generally useful only if you know that the transition contains exactly one element.

  • Specifies the transition easing function for all selected elements. The value must be specified as a function. The easing function is invoked for each frame of the animation, being passed the normalized time t in the range [0, 1]; it must then return the eased time tʹ which is typically also in the range [0, 1]. A good easing function should return 0 if t = 0 and 1 if t = 1. If an easing function is not specified, it defaults to d3.easeCubic.

    Parameter easingFn

    An easing function which is passed the normalized time t in the range [0, 1]; it must then return the eased time tʹ which is typically also in the range [0, 1]. A good easing function should return 0 if t = 0 and 1 if t = 1.

method easeVarying

easeVarying: (factory: any) => this;
  • Specifies a factory for the transition easing function.

    Parameter factory

    The factory must be a function. It is invoked for each node of the selection, being passed the current datum (d), the current index (i), and the current group (nodes), with this as the current DOM element. It must return an easing function.

method empty

empty: () => boolean;
  • Return true if this transition contains no (non-null) elements.

method end

end: () => Promise<void>;
  • Returns a promise that resolves when every selected element finishes transitioning. If any element’s transition is cancelled or interrupted, the promise rejects.

method filter

filter: {
(filter: string): Transition<GElement, Datum, PElement, PDatum>;
<FilteredElement extends any>(filter: string): Transition<
FilteredElement,
Datum,
PElement,
PDatum
>;
(filter: any): Transition<GElement, Datum, PElement, PDatum>;
<FilteredElement extends any>(filter: any): Transition<
FilteredElement,
Datum,
PElement,
PDatum
>;
};
  • For each selected element, selects only the elements that match the specified filter, and returns a transition on the resulting selection.

    The new transition has the same id, name and timing as this transition; however, if a transition with the same id already exists on a selected element, the existing transition is returned for that element.

    Parameter filter

    A CSS selector string.

  • For each selected element, selects only the elements that match the specified filter, and returns a transition on the resulting selection.

    The new transition has the same id, name and timing as this transition; however, if a transition with the same id already exists on a selected element, the existing transition is returned for that element.

    The generic refers to the type of element which will be selected after applying the filter, i.e. if the element types contained in a pre-filter selection are narrowed to a subset as part of the filtering.

    Parameter filter

    A CSS selector string.

  • For each selected element, selects only the elements that match the specified filter, and returns a transition on the resulting selection.

    The new transition has the same id, name and timing as this transition; however, if a transition with the same id already exists on a selected element, the existing transition is returned for that element.

    Parameter filter

    A filter function which is evaluated for each selected element, in order, being passed the current datum (d), the current index (i), and the current group (nodes), with this as the current DOM element (nodes[i]). The filter function returns a boolean indicating, whether the selected element matches.

  • For each selected element, selects only the elements that match the specified filter, and returns a transition on the resulting selection.

    The new transition has the same id, name and timing as this transition; however, if a transition with the same id already exists on a selected element, the existing transition is returned for that element.

    The generic refers to the type of element which will be selected after applying the filter, i.e. if the element types contained in a pre-filter selection are narrowed to a subset as part of the filtering.

    Parameter filter

    A filter function which is evaluated for each selected element, in order, being passed the current datum (d), the current index (i), and the current group (nodes), with this as the current DOM element (nodes[i]). The filter function returns a boolean indicating, whether the selected element matches.

method merge

merge: (
other: Transition<GElement, Datum, PElement, PDatum>
) => Transition<GElement, Datum, PElement, PDatum>;
  • Returns a new transition merging this transition with the specified other transition, which must have the same id as this transition. The returned transition has the same number of groups, the same parents, the same name and the same id as this transition. Any missing (null) elements in this transition are filled with the corresponding element, if present (not null), from the other transition.

    Parameter other

    The transition to be merged.

method node

node: () => GElement | null;
  • Return the first (non-null) element in this transition. If the transition is empty, returns null.

method nodes

nodes: () => GElement[];
  • Return an array of all (non-null) elements in this transition.

method on

on: {
(typenames: string): ValueFn<GElement, Datum, void> | undefined;
(typenames: string, listener: null): this;
(typenames: string, listener: any): this;
};
  • Return the currently-assigned listener for the specified event typename on the first (non-null) selected element, if any. If multiple typenames are specified, the first matching listener is returned.

    Parameter typenames

    The typenames is one of the following string event types: start (when the transition starts), end (when the transition ends), interrupt (when the transition is interrupted), cancel(when the transition is cancelled). Note that these are not native DOM events. The type may be optionally followed by a period (.) and a name; the optional name allows multiple callbacks to be registered to receive events of the same type, such as "start.foo"" and "start.bar". To specify multiple typenames, separate typenames with spaces, such as "interrupt end"" or "start.foo start.bar".

  • Remove all listeners for a given name.

    Parameter typenames

    Name of the event type for which the listener should be removed. To remove all listeners for a given name use ".foo" as the typename, where foo is the name; to remove all listeners with no name, specify "." as the typename.

    Parameter listener

    Use null to remove listeners.

  • Add a listener to each selected element for the specified event typenames.

    When a specified transition event is dispatched on a selected node, the specified listener will be invoked for each transitioning element. Listeners always see the latest datum for their element, but the index is a property of the selection and is fixed when the listener is assigned; to update the index, re-assign the listener.

    Parameter typenames

    The typenames is one of the following string event types: start (when the transition starts), end (when the transition ends), interrupt (when the transition is interrupted), cancel(when the transition is cancelled). Note that these are not native DOM events. The type may be optionally followed by a period (.) and a name; the optional name allows multiple callbacks to be registered to receive events of the same type, such as "start.foo"" and "start.bar". To specify multiple typenames, separate typenames with spaces, such as "interrupt end"" or "start.foo start.bar".

    Parameter listener

    A listener function which will be evaluated for each selected element, being passed the current datum (d), the current index (i), and the current group (nodes), with this as the current DOM element (nodes[i]). Listeners always see the latest datum for their element, but the index is a property of the selection and is fixed when the listener is assigned; to update the index, re-assign the listener.

method remove

remove: () => this;
  • For each selected element, removes the element when the transition ends, as long as the element has no other active or pending transitions. If the element has other active or pending transitions, does nothing.

method select

select: {
<DescElement extends any>(selector: string): Transition<
DescElement,
Datum,
PElement,
PDatum
>;
<DescElement extends any>(selector: any): Transition<
DescElement,
Datum,
PElement,
PDatum
>;
};
  • For each selected element, select the first descendant element that matches the specified selector string, if any, and returns a transition on the resulting selection. The new transition has the same id, name and timing as this transition; however, if a transition with the same id already exists on a selected element, the existing transition is returned for that element.

    The generic represents the type of the descendant element to be selected.

    Parameter selector

    CSS selector string

  • For each selected element, select the descendant element returned by the selector function, if any, and returns a transition on the resulting selection. The new transition has the same id, name and timing as this transition; however, if a transition with the same id already exists on a selected element, the existing transition is returned for that element.

    The generic represents the type of the descendant element to be selected.

    Parameter selector

    A selector function, which is evaluated for each selected element, in order, being passed the current datum (d), the current index (i), and the current group (nodes), with this as the current DOM element (nodes[i]). It must return an element, or null if there is no matching element.

method selectAll

selectAll: {
<DescElement extends any, OldDatum>(selector: string): Transition<
DescElement,
OldDatum,
GElement,
Datum
>;
<DescElement extends any, OldDatum>(selector: any): Transition<
DescElement,
OldDatum,
GElement,
Datum
>;
};
  • For each selected element, select all descendant elements that match the specified selector string, if any, and returns a transition on the resulting selection. The new transition has the same id, name and timing as this transition; however, if a transition with the same id already exists on a selected element, the existing transition is returned for that element.

    The first generic "DescElement" refers to the type of descendant element to be selected. The second generic "OldDatum" refers to the type of the datum, of a selected element. This is useful when re-selecting elements with a previously set, know datum type.

    Parameter selector

    CSS selector string

  • For each selected element, select all descendant elements returned by the selector function, if any, and returns a transition on the resulting selection. The new transition has the same id, name and timing as this transition; however, if a transition with the same id already exists on a selected element, the existing transition is returned for that element.

    The first generic "DescElement" refers to the type of descendant element to be selected. The second generic "OldDatum" refers to the type of the datum, of a selected element. This is useful when re-selecting elements with a previously set, know datum type.

    Parameter selector

    A selector function which is evaluated for each selected element, in order, being passed the current datum (d), the current index (i), and the current group (nodes), with this as the current DOM element (nodes[i]). It must return an array of elements (or a pseudo-array, such as a NodeList), or the empty array if there are no matching elements.

method selection

selection: () => any;
  • Return the selection corresponding to this transition.

method size

size: () => number;
  • Returns the total number of elements in this transition.

method style

style: {
(name: string, value: null): this;
(
name: string,
value: string | number | boolean,
priority?: 'important'
): this;
(name: string, value: any, priority?: 'important'): this;
};
  • For each selected element, the style with the specified name will be cleared at the start of the transition.

    Parameter name

    Name of the style.

    Parameter value

    Use null to clear the style.

  • For each selected element, assigns the style tween for the style with the specified name to the specified target value with the specified priority. The starting value of the tween is the style’s inline value if present, and otherwise its computed value. The target value is the specified constant value for all elements.

    An interpolator is chosen based on the type of the target value, using the following algorithm: 1.) If value is a number, use interpolateNumber. 2.) If value is a color or a string coercible to a color, use interpolateRgb. 3.) Use interpolateString.

    To apply a different interpolator, use transition.attrTween.

    Parameter name

    Name of the style.

    Parameter value

    Target value for the style.

    Parameter priority

    An optional priority flag, either null or the string important (without the exclamation point)

  • For each selected element, assigns the style tween for the style with the specified name to the specified target value with the specified priority. The starting value of the tween is the style's inline value if present, and otherwise its computed value. The target value is return value of the value function evaluated for the selected element.

    An interpolator is chosen based on the type of the target value, using the following algorithm: 1.) If value is a number, use interpolateNumber. 2.) If value is a color or a string coercible to a color, use interpolateRgb. 3.) Use interpolateString.

    To apply a different interpolator, use transition.attrTween.

    Parameter name

    Name of the style.

    Parameter value

    A value function which is evaluated for each selected element, in order, being passed the current datum (d), the current index (i), and the current group (nodes), with this as the current DOM element (nodes[i]). A null value will clear the style at the start of the transition.

    Parameter priority

    An optional priority flag, either null or the string important (without the exclamation point)

method styleTween

styleTween: {
(name: string): any;
(name: string, factory: null): this;
(name: string, factory: any, priority?: 'important'): this;
};
  • Return the current interpolator factory for style with the specified name, or undefined if no such tween exists.

    Parameter name

    Name of style.

  • Remove the previously-assigned style tween of the specified name, if any.

    Parameter name

    Name of style.

    Parameter factory

    Use null to remove previously-assigned style tween.

  • Assign the style tween for the style with the specified name to the specified interpolator factory. An interpolator factory is a function that returns an interpolator; when the transition starts, the factory is evaluated for each selected element. The returned interpolator will then be invoked for each frame of the transition, in order, being passed the eased time t, typically in the range [0, 1]. Lastly, the return value of the interpolator will be used to set the style value. The interpolator must return a string.

    Parameter name

    Name of style.

    Parameter factory

    An interpolator factory which is evaluated for each selected element, in order, being passed the current datum (d), the current index (i), and the current group (nodes), with this as the current DOM element (nodes[i]). The interpolator factory returns a string interpolator, which takes as its argument eased time t, typically in the range [0, 1] and returns the interpolated string.

    Parameter priority

    An optional priority flag, either null or the string important (without the exclamation point)

method text

text: {
(value: null): this;
(value: string | number | boolean): this;
(value: any): this;
};
  • For each selected element, the text content will be cleared, replacing any existing child elements.

    Parameter value

    Use null to clear the text content.

  • For each selected element, sets the text content to the specified target value when the transition starts.

    To interpolate text rather than to set it on start, use transition.textTween (for example) or append a replacement element and cross-fade opacity (for example). Text is not interpolated by default because it is usually undesirable.

    Parameter value

    Value used for text content

  • For each selected element, sets the text content returned by the value function for each selected element when the transition starts.

    To interpolate text rather than to set it on start, use transition.textTween (for example) or append a replacement element and cross-fade opacity (for example). Text is not interpolated by default because it is usually undesirable.

    Parameter value

    A value function which is evaluated for each selected element, in order, being passed the current datum (d), the current index (i), and the current group (nodes), with this as the current DOM element (nodes[i]). A null value will clear the text content at the start of the transition.

method textTween

textTween: { (): any; (factory: null): this; (factory: any): this };
  • Returns the current interpolator factory for text, or undefined if no such tween exists.

  • Removes the previously-assigned text tween, if any

    Parameter factory

    Use null to remove previously-assigned text tween.

  • Assigns the text tween to the specified interpolator factory. An interpolator factory is a function that returns an interpolator; when the transition starts, the factory is evaluated for each selected element, in order, being passed the current datum d and index i, with the this context as the current DOM element. The returned interpolator will then be invoked for each frame of the transition, in order, being passed the eased time t, typically in the range [0, 1]. Lastly, the return value of the interpolator will be used to set the text. The interpolator must return a string.

    Parameter factory

    An interpolator factory is a function that returns an interpolator; when the transition starts, the factory is evaluated for each selected element, in order, being passed the current datum d and index i, with the this context as the current DOM element. The returned interpolator will then be invoked for each frame of the transition, in order, being passed the eased time t, typically in the range [0, 1]. Lastly, the return value of the interpolator will be used to set the text. The interpolator must return a string.

method transition

transition: () => Transition<GElement, Datum, PElement, PDatum>;
  • Returns a new transition on the same selected elements as this transition, scheduled to start when this transition ends. The new transition inherits a reference time equal to this transition’s time plus its delay and duration. The new transition also inherits this transition’s name, duration, and easing. This method can be used to schedule a sequence of chained transitions.

    A delay configured for the new transition will be relative to the previous transition.

method tween

tween: {
(name: string): any;
(name: string, tweenFn: null): this;
(name: string, tweenFn: any): this;
};
  • Returns the tween with the specified name, or undefined, if no tween was previously assigned to that name.

    Parameter name

    Name of tween.

  • Removes the tween with the specified name, if a tween was previously assigned to that name.

    Parameter name

    Name of tween.

    Parameter tweenFn

    Use null to remove a previously-assigned tween.

  • For each selected element, assigns the tween with the specified name with the specified value function. The value must be specified as a function that returns a function. When the transition starts, the value function is evaluated for each selected element. The returned function is then invoked for each frame of the transition, in order, being passed the eased time t, typically in the range [0, 1].

    Parameter name

    Name of tween.

    Parameter tweenFn

    A tween function which is evaluated for each selected element, in order, being passed the current datum (d), the current index (i), and the current group (nodes), with this as the current DOM element (nodes[i]). The tween function returns a function which takes as its argument eased time t, typically in the range [0, 1] and performs the tweening activities for each transition frame.

Type Aliases

type SelectionOrTransition

type SelectionOrTransition<
GElement extends BaseType,
Datum,
PElement extends BaseType,
PDatum
> =
| Selection<GElement, Datum, PElement, PDatum>
| Transition<GElement, Datum, PElement, PDatum>;
  • Represents the union of the Selection and Transition types for any usages that operate on both. Typically used for functions which take in either a selection or transition and set or update attributes.

Package Files (1)

Dependencies (1)

Dev Dependencies (0)

No dev dependencies.

Peer Dependencies (0)

No peer dependencies.

Badge

To add a badge like this onejsDocs.io badgeto your package's README, use the codes available below.

You may also use Shields.io to create a custom badge linking to https://www.jsdocs.io/package/@types/d3-transition.

  • Markdown
    [![jsDocs.io](https://img.shields.io/badge/jsDocs.io-reference-blue)](https://www.jsdocs.io/package/@types/d3-transition)
  • HTML
    <a href="https://www.jsdocs.io/package/@types/d3-transition"><img src="https://img.shields.io/badge/jsDocs.io-reference-blue" alt="jsDocs.io"></a>