• Add transition.easeVarying.
• Add transition[Symbol.iterator]; transitions are now iterable.
• Fix selection.transition to error if the named transition to inherit is not found. #45 #59
• Fix transition.end to resolve immediately if the selection is empty. #105
• Change d3-selection to peer dependency. #92
• Upgrade to d3-selection 2.

This release adopts ES2015 language features such as for-of and drops support for older browsers, including IE. If you need to support pre-ES2015 environments, you should stick with d3-transition 1.x or use a transpiler.

• Add sideEffects: true to the package.json.

• Propagate the this context to interpolators in transition.styleTween, transition.attrTween and transition.textTween.

• Add transition.textTween. #91

• Adopt explicit files when publishing.
• Add sideEffects: false to the package.json. (Note: this was later reverted!)
• Update dependencies.

• Add transition.end. (#77)
• Add cancel events to transition.on.
• Improve the performance of transition.style and transition.attr. (5a939e11b930c5d01e36eafc028880ddbc8d36f9, #88, #87)
• Tween functions can now use this to refer to the current node.
• Fix removal of styles when the value passed to transition.style is null. (#89)
• Fix interpolation in transition.style and transition.attr in certain non-string cases. (#87)

v1.1.3

Compare

Choose a tag to compare

v1.1.2

Compare

Choose a tag to compare

• Improve messages for transition lifecycle errors.

• Change transition.style to start from the inline style, if present. (#47, #68)

• Fix string coercion in transition.style and transition.attr. Thanks, @sghall! (#67)
• Update dependencies.

• Fix reporting of interrupt events (d3/d3-brush#21).

• Chained transitions no longer sometimes interrupt their preceding transition (#54).
• Transitions no longer get stuck if an error is thrown on the last tick (#48).
• Transitions no longer leak memory if an error is thrown (#48).

• Add module entry point to package.json.

• First stable release.
• Changed transition.filter to no longer preserve index; use transition.select instead.

Changes since D3 3.x

The selection.transition method now takes an optional transition instance which can be used to synchronize a new transition with an existing transition. (This change is discussed further in What Makes Software Good?) For example:

var t = d3.transition()
    .duration(750)
    .ease(d3.easeLinear);

d3.selectAll(".apple").transition(t)
    .style("fill", "red");

d3.selectAll(".orange").transition(t)
    .style("fill", "orange");

Transitions created this way inherit timing from the closest ancestor element, and thus are synchronized even when the referenced transition has variable timing such as a staggered delay. This method replaces the deeply magical behavior of transition.each in 3.x; in 4.0, transition.each is identical to selection.each. Use the new transition.on method to listen to transition events.

The meaning of transition.delay has changed for chained transitions created by transition.transition. The specified delay is now relative to the previous transition in the chain, rather than the first transition in the chain; this makes it easier to insert interstitial pauses. For example:

d3.selectAll(".apple")
  .transition() // First fade to green.
    .style("fill", "green")
  .transition() // Then red.
    .style("fill", "red")
  .transition() // Wait one second. Then brown, and remove.
    .delay(1000)
    .style("fill", "brown")
    .remove();

Time is now frozen in the background; see d3-timer for more information. While it was previously the case that transitions did not run in the background, now they pick up where they left off when the page returns to the foreground. This avoids page hangs by not scheduling an unbounded number of transitions in the background. If you want to schedule an infinitely-repeating transition, use transition events, or use d3.timeout and d3.interval in place of setTimeout and setInterval.

The selection.interrupt method now cancels all scheduled transitions on the selected elements, in addition to interrupting any active transition. When transitions are interrupted, any resources associated with the transition are now released immediately, rather than waiting until the transition starts, improving performance. (See also timer.stop.) The new d3.interrupt method is an alternative to selection.interrupt for quickly interrupting a single node.

The new d3.active method allows you to select the currently-active transition on a given node, if any. This is useful for modifying in-progress transitions and for scheduling infinitely-repeating transitions. For example, this transition continuously oscillates between red and blue:

d3.select("circle")
  .transition()
    .on("start", function repeat() {
        d3.active(this)
            .style("fill", "red")
          .transition()
            .style("fill", "blue")
          .transition()
            .on("start", repeat);
      });

The life cycle of a transition is now more formally defined and enforced. For example, attempting to change the duration of a running transition now throws an error rather than silently failing. The transition.remove method has been fixed if multiple transition names are in use: the element is only removed if it has no scheduled transitions, regardless of name. The transition.ease method now always takes an easing function, not a string. When a transition ends, the tweens are invoked one last time with t equal to exactly 1, regardless of the associated easing function.

As with selections in 4.0, all transition callback functions now receive the standard arguments: the element’s datum (d), the element’s index (i), and the element’s group (nodes), with this as the element. This notably affects transition.attrTween and transition.styleTween, which no longer pass the tween function the current attribute or style value as the third argument. The transition.attrTween and transition.styleTween methods can now be called in getter modes for debugging or to share tween definitions between transitions.

Homogenous transitions are now optimized! If all elements in a transition share the same tween, interpolator, or event listeners, this state is now shared across the transition rather than separately allocated for each element. 4.0 also uses an optimized default interpolator in place of d3.interpolate for transition.attr and transition.style. And transitions can now interpolate both CSS and SVG transforms.

For resuable components that support transitions, such as axes, a new transition.selection method returns the selection that corresponds to a given transition. There is also a new transition.merge method that is equivalent to selection.merge.

For the sake of parsimony, the multi-value map methods have been extracted to d3-selection-multi and are no longer part of the default bundle. The multi-value map methods have also been renamed to plural form to reduce overload: transition.attrs and transition.styles.

See CHANGES for all D3 changes since 3.x.

• Export to the global d3 in vanilla environments (d3/d3#2840).

• Update to d3-interpolate 0.8.

• Add d3.interrupt.

• Change selection.transition to inherit timing from the nearest ancestor (#40).

• Fix transition.attrTween when the value is null.
• Fix transition.styleTween when the value is null.
• Fix transition.tween when the value is null.
• Fix transition.on when the callback is null.

• Fix transition.remove when multiple names are in use (#38).
• Fix selection.interrupt during a start event.
• Fix selection.interrupt during a tween on its final frame.
• Optimize the interpolator used by transition.attr and transition.style.
• Add hundreds of tests (#20).

• Update d3-interpolate to 0.7.

• Fix transition.remove during a start event.
• Allow interrupt and end listeners to be modified up to and during the start event.

• Update d3-interpolate to 0.6.

• Synchronously evaluate target values in transition.{attr,style,text} (#37).

• Fix transition.selectAll.

• Transitions are now immutable! (See d3-selection 0.7 for more.)
• Added transition.selection.
• Added transition.merge.
• Changed transition.filter to preserve index.

• Fix transition.constructor (#34).

• Update to d3-timer 0.4.

• Fix transition.remove.

• Now selection.transition can take a transition (#21).
• Add d3.active for selecting the active transition (#15).

• Reuse interpolators, where possible, in transition.attr and transition.style.
• Reuse dispatches, where possible, in transition.on.
• Reuse tweens, where possible, in transition.tween.
• Dispatch interrupt before clearing the interrupted transition, allowing chaining.
• Chained transitions now use the preceding end as reference time, allowing custom delay.
• Disallow modification of transition state after start.
• Disallow modification of transition delay and listeners after schedule.
• Disallow inspection of transition state after end.
• Update dependencies.

• First mostly-functional release.