or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

animation-properties.mdcontrol-flow.mdindex.mdselection-operations.mdtiming-control.mdtransition-creation.md
tile.json

index.mddocs/

d3-transition

d3-transition provides animated transitions for D3 selections, enabling smooth interpolation between DOM states over time. It offers a selection-like interface for animating attributes, styles, and other properties with configurable timing, easing functions, and per-element delays. The library supports automatic detection and interpolation of various data types including numbers, colors, and strings with embedded numbers, while also providing custom interpolator capabilities for advanced animations.

Package Information

  • Package Name: d3-transition
  • Package Type: npm
  • Language: JavaScript (ES6 modules)
  • Installation: npm install d3-transition

Core Imports

ESM (ES6 modules):

import { transition, active, interrupt } from "d3-transition";

CommonJS:

const { transition, active, interrupt } = require("d3-transition");

For use with d3-selection (required peer dependency):

import { select, selectAll } from "d3-selection";
import "d3-transition"; // Extends selection prototype

Basic Usage

import { select } from "d3-selection";
import "d3-transition";

// Basic transition on a selection
select("body")
  .transition()
  .duration(750)
  .style("background-color", "red");

// Chained transitions
select("circle")
  .transition()
    .duration(500)
    .attr("r", 20)
  .transition()
    .delay(100)
    .attr("fill", "blue");

// Using global transition function
import { transition } from "d3-transition";

const t = transition()
  .duration(1000)
  .ease(d3.easeBounce);

select(".item").transition(t)
  .style("opacity", 0);

Architecture

d3-transition is built around several key components:

  • Selection Extensions: Adds .transition() and .interrupt() methods to d3-selection prototype
  • Transition Class: Core transition object with chainable methods for configuration and animation
  • Scheduling System: Internal state management for transition lifecycle and timing coordination
  • Interpolation Engine: Automatic detection and custom interpolation of various data types
  • Event System: Lifecycle events (start, end, interrupt, cancel) for transition monitoring

Capabilities

Creating Transitions

Core functions for creating and managing transitions from selections or directly from the document root.

function transition(name?: string | Transition): Transition;
function active(node: Element, name?: string): Transition | null;
function interrupt(node: Element, name?: string): void;

Transition Creation

Animation Properties

Methods for animating DOM attributes, styles, and text content with automatic interpolation between start and end values.

// Attribute animation
transition.attr(name: string, value: any): Transition;
transition.attrTween(name: string, factory?: InterpolatorFactory): Transition;

// Style animation  
transition.style(name: string, value: any, priority?: string): Transition;
transition.styleTween(name: string, factory?: InterpolatorFactory, priority?: string): Transition;

// Text animation
transition.text(value: any): Transition;
transition.textTween(factory?: InterpolatorFactory): Transition;

// Custom animation
transition.tween(name: string, value?: TweenFunction): Transition;

Animation Properties

Timing Control

Configuration methods for controlling transition timing including delay, duration, and easing functions.

transition.delay(value?: number | DelayFunction): Transition;
transition.duration(value?: number | DurationFunction): Transition; 
transition.ease(value?: EaseFunction): Transition;
transition.easeVarying(factory: EaseFactory): Transition;

Timing Control

Selection Operations

Methods for creating sub-transitions by selecting elements, filtering, and merging transitions.

transition.select(selector: string | SelectFunction): Transition;
transition.selectAll(selector: string | SelectAllFunction): Transition;
transition.selectChild(selector?: string | SelectFunction): Transition;
transition.selectChildren(selector?: string | SelectFunction): Transition;
transition.filter(filter: string | FilterFunction): Transition;
transition.merge(other: Transition): Transition;

Selection Operations

Control Flow

Advanced methods for transition coordination, event handling, and lifecycle management.

transition.end(): Promise<void>;
transition.on(typenames: string, listener?: EventListener): Transition;
transition.transition(): Transition;
transition.selection(): Selection; 
transition.each(function: EachFunction): Transition;
transition.call(function: CallFunction, ...args: any[]): Transition;
transition.remove(): Transition;

Control Flow

Types

interface Transition {
  // Selection operations
  select(selector: string | SelectFunction): Transition;
  selectAll(selector: string | SelectAllFunction): Transition;
  filter(filter: string | FilterFunction): Transition;
  merge(other: Transition): Transition;
  
  // Animation methods
  attr(name: string, value: any): Transition;
  attrTween(name: string, factory?: InterpolatorFactory): Transition;
  style(name: string, value: any, priority?: string): Transition;
  styleTween(name: string, factory?: InterpolatorFactory, priority?: string): Transition;
  text(value: any): Transition;
  textTween(factory?: InterpolatorFactory): Transition;
  tween(name: string, value?: TweenFunction): Transition;
  
  // Timing control
  delay(value?: number | DelayFunction): Transition;
  duration(value?: number | DurationFunction): Transition;
  ease(value?: EaseFunction): Transition;
  easeVarying(factory: EaseFactory): Transition;
  
  // Control flow
  end(): Promise<void>;
  on(typenames: string, listener?: EventListener): Transition;
  transition(): Transition;
  selection(): Selection;
  each(function: EachFunction): Transition;
  call(function: CallFunction, ...args: any[]): Transition;
  remove(): Transition;
  
  // Utility methods (inherited from d3-selection)
  empty(): boolean;
  nodes(): Element[];
  node(): Element | null;
  size(): number;
}

type InterpolatorFactory = (this: Element, d: any, i: number, group: Element[]) => Interpolator;
type Interpolator = (t: number) => any;
type TweenFunction = (this: Element, d: any, i: number, group: Element[]) => Interpolator;
type DelayFunction = (this: Element, d: any, i: number, group: Element[]) => number;
type DurationFunction = (this: Element, d: any, i: number, group: Element[]) => number; 
type EaseFunction = (t: number) => number;
type EaseFactory = (this: Element, d: any, i: number, group: Element[]) => EaseFunction;
type EventListener = (this: Element, d: any, i: number, group: Element[]) => void;
type SelectFunction = (this: Element, d: any, i: number, group: Element[]) => Element | null;
type SelectAllFunction = (this: Element, d: any, i: number, group: Element[]) => Element[] | NodeList;
type FilterFunction = (this: Element, d: any, i: number, group: Element[]) => boolean;
type EachFunction = (this: Element, d: any, i: number, group: Element[]) => void;
type CallFunction = (transition: Transition, ...args: any[]) => void;

// d3-selection types (peer dependency)
interface Selection {
  // Represents d3-selection Selection interface
  // Full definition available from @types/d3-selection
}