d3-transition

What is d3-transition?

The d3-transition package is part of the D3 (Data-Driven Documents) library that provides a module for animating DOM elements using smooth transitions. It allows developers to interpolate styles, attributes, and other properties over time, creating dynamic and interactive visualizations.

What are d3-transition's main functionalities?

Initializing a Transition

This code selects a 'circle' element and initializes a transition on it, then changes its fill color to blue over the default transition duration.

d3.select('circle').transition().style('fill', 'blue');

Setting Transition Duration

This code selects a 'circle' element, initializes a transition with a specified duration of 750 milliseconds, and then changes its fill color to blue.

d3.select('circle').transition().duration(750).style('fill', 'blue');

Delaying a Transition

This code selects a 'circle' element, initializes a transition with a delay of 500 milliseconds before starting, and then changes its fill color to blue.

d3.select('circle').transition().delay(500).style('fill', 'blue');

Easing Functions

This code selects a 'circle' element, initializes a transition with a bounce easing function, and then changes its fill color to blue.

d3.select('circle').transition().ease(d3.easeBounce).style('fill', 'blue');

Chaining Transitions

This code selects a 'circle' element and creates a chained transition, first changing the fill color to red and then to blue, each with its own transition period.

d3.select('circle').transition().style('fill', 'red').transition().style('fill', 'blue');

Other packages similar to d3-transition

animejs

Anime.js is a lightweight JavaScript animation library that works with CSS properties, SVG, DOM attributes, and JavaScript Objects. It is similar to d3-transition in that it allows for creating complex animations and transitions, but it is not specifically tied to data-driven documents or visualization.

velocity-animate

Velocity is an animation engine that offers similar features to d3-transition, such as animating DOM elements and SVGs. It emphasizes performance and feature-richness. While it can be used for data visualization, it is a more general-purpose animation library.

gsap

GSAP (GreenSock Animation Platform) is a robust animation library that can animate any JavaScript object and offers a wide range of plugins for additional functionality. It is more comprehensive than d3-transition and is used for a broader range of animation tasks beyond data visualization.

popmotion

Popmotion is a functional, reactive animation library that can be used to create animations and interactions. It offers a more functional approach compared to d3-transition and is designed to handle user input and animate any property of any object.

README

d3-transition

A transition is a selection-like interface to animate changes to DOM elements smoothly over time, instead of applying those changes instantaneously. To start a transition, select some elements, call selection.transition, and then apply the desired transition methods. For example:

d3.select("body")
  .transition()
    .style("background-color", "red");

While transitions and selections share many similar methods, they operate somewhat differently; see below for details.

D3 has many built-in interpolators to tween arbitrary values. For example, you can transition from the font 500 12px sans-serif to 300 42px sans-serif, and D3 will find the numbers embedded within the string, interpolating both font size and weight automatically. To specify a custom interpolator, use transition.attrTween, transition.styleTween or transition.tween.

Only one transition of a given name may be active on a given element at a given time. However, multiple transitions with different names may be simultaneously active on the element, and multiple transitions with the same name may be scheduled on the element, provided they do not overlap in time. See transition.transition, for example.

If a newer transition starts on a given element, it automatically interrupts any active transition and cancels any pending transitions. This allows new transitions to supersede old transitions, such as in response to a user event, even if the old transitions were delayed. To manually interrupt transitions, use selection.interrupt. To run multiple transitions simultaneously on a given element or elements, give each transition a unique name.

For more on transitions, see Working with Transitions.

Installing

If you use NPM, npm install d3-transition. Otherwise, download the latest release. The released bundle supports AMD, CommonJS, and vanilla environments. Create a custom build using Rollup or your preferred bundler. You can also load directly from d3js.org:

<script src="https://d3js.org/d3-color.v0.4.min.js"></script>
<script src="https://d3js.org/d3-dispatch.v0.4.min.js"></script>
<script src="https://d3js.org/d3-ease.v0.7.min.js"></script>
<script src="https://d3js.org/d3-interpolate.v0.5.min.js"></script>
<script src="https://d3js.org/d3-selection.v0.6.min.js"></script>
<script src="https://d3js.org/d3-timer.v0.3.min.js"></script>
<script src="https://d3js.org/d3-transition.v0.1.min.js"></script>

In a vanilla environment, a d3_transition global is exported. Try d3-transition in your browser.

API Reference

• Selecting Elements
• Modifying Elements
• Timing
• Control Flow

Selecting Elements

# selection.transition([name])

…

# selection.interrupt([name])

…

# d3.transition([name])

Equivalent to:

d3.selection().transition(name)

Also, d3.transition can be used to check whether something is an instanceof a transition, and to extend or modify the transition prototype.

# transition.select(selector)

…

# transition.selectAll(selector)

…

# transition.filter(filter)

…

# transition.transition()

…

# d3.active(node[, name])

Returns the active transition on the specified node with the specified name, if any. If no name is specified, the default empty name is used. Returns null if there is no such active transition on the specified node.

Modifying Elements

…

# transition.attr(name, value)

… Note that unlike selection.attr, value is required.

# transition.attrTween(name[, value])

…

# transition.style(name, value[, priority])

… Note that unlike selection.style, value is required.

# transition.styleTween(name[, value[, priority]]))

…

# transition.text(value)

… Note that unlike selection.text, value is required.

# transition.remove()

…

# transition.tween(name[, value])

…

Timing

Transitions may have per-element delays and durations, computed using functions of data (or index) as with other selection methods. For example, you can sort and reorder elements with a staggered delay to make the change in order easier to perceive. For more on this topic, see Animated Transitions in Statistical Data Graphics by Heer & Robertson.

# transition.delay([value])

…

# transition.duration([value])

…

# transition.ease([value])

…

Control Flow

…

# transition.on(typenames[, listener])

…

# transition.each(function)

…

# transition.call(function[, arguments…])

…

# transition.empty()

…

# transition.nodes()

…

# transition.node()

…

# transition.size()

…