Smooth animated transitions between states with customizable timing, easing, and attribute interpolation for creating engaging visualizations.
Functions for creating animated transitions on selections.
interface Selection<GElement, Datum, PElement, PDatum> {
/**
* Create transition on selected elements
* @param name - Optional transition name
* @returns Transition object
*/
transition(name?: string): Transition<GElement, Datum, PElement, PDatum>;
/**
* Interrupt active transitions on selected elements
* @param name - Optional transition name to interrupt
* @returns Selection for chaining
*/
interrupt(name?: string): Selection<GElement, Datum, PElement, PDatum>;
}
/**
* Create transition on document root
* @param name - Optional transition name
* @returns Root transition
*/
function transition(name?: string): Transition<HTMLElement, any, null, undefined>;
interface Transition<GElement, Datum, PElement, PDatum> {
/**
* Animate attribute changes
* @param name - Attribute name
* @param value - Target value or function
* @returns Transition for chaining
*/
attr(name: string, value: any): Transition<GElement, Datum, PElement, PDatum>;
/**
* Animate style changes
* @param name - Style property name
* @param value - Target value or function
* @returns Transition for chaining
*/
style(name: string, value: any): Transition<GElement, Datum, PElement, PDatum>;
/**
* Set transition duration
* @param milliseconds - Duration in milliseconds
* @returns Transition for chaining
*/
duration(milliseconds: number): Transition<GElement, Datum, PElement, PDatum>;
/**
* Set transition delay
* @param milliseconds - Delay in milliseconds
* @returns Transition for chaining
*/
delay(milliseconds: number): Transition<GElement, Datum, PElement, PDatum>;
/**
* Set easing function
* @param easing - Easing function
* @returns Transition for chaining
*/
ease(easing: (t: number) => number): Transition<GElement, Datum, PElement, PDatum>;
}Built-in easing functions for natural-feeling animations.
// Linear easing (constant speed)
const easeLinear: (t: number) => number;
// Quadratic easing
const easeQuad: (t: number) => number;
const easeQuadIn: (t: number) => number;
const easeQuadOut: (t: number) => number;
const easeQuadInOut: (t: number) => number;
// Cubic easing
const easeCubic: (t: number) => number;
const easeCubicIn: (t: number) => number;
const easeCubicOut: (t: number) => number;
const easeCubicInOut: (t: number) => number;
// Elastic easing
const easeElastic: (t: number) => number;
const easeElasticIn: (t: number) => number;
const easeElasticOut: (t: number) => number;
const easeElasticInOut: (t: number) => number;
// Bounce easing
const easeBounce: (t: number) => number;
const easeBounceIn: (t: number) => number;
const easeBounceOut: (t: number) => number;
const easeBounceInOut: (t: number) => number;import { select, easeElastic } from "d3";
// Basic transition
select("circle")
.transition()
.duration(1000)
.attr("r", 50)
.style("fill", "red");
// Transition with custom easing and delay
select(".bars")
.selectAll("rect")
.transition()
.delay((d, i) => i * 100)
.duration(750)
.ease(easeElastic)
.attr("height", d => yScale(d.value));type EasingFunction = (normalizedTime: number) => number;
interface Transition<GElement, Datum, PElement, PDatum> {
// All transition methods
}