Custom Tweens

100%

✓ Published0🌍 Public

Last edited Feb 9, 2016

Created on Aug 9, 2012

A single cross-shaped symbol, drawn with the SVG path API via `d3.svg.symbol`, rotates continuously in the center of the frame. The example demonstrates how a custom transition interpolator overrides default behavior: `transition.attrTween` combines `d3.interpolateString` to animate the transform attribute from "rotate(0)" to "rotate(720)", enabling a full double spin that the standard numeric interpolation would ignore. Each ten-second transition loops indefinitely through the `each` event, showcasing attribute tweening in a minimal SVG animation.

AI-generated description

Use transition.attrTween to customize interpolation during a transition. For example, the default transform interpolation from "rotate(0)" to "rotate(720)" has no effect because 0º and 720º are equivalent; by changing the interpolator to d3.interpolateString, you can animate the rotation.

symbol.transition()
    .attrTween("transform", function() {
      return d3.interpolateString("rotate(0)", "rotate(720)");
    });

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

Named Transitions

This example demonstrates concurrent transitions on a single SVG path by using named transitions in D3 3.5. A black cross-shaped symbol, rendered with a red stroke, rotates continuously via the “twizzle” transition while its stroke width pulses with the “plonk” transition. Each animation uses `transition.attrTween` and `transition.style` with `d3.interpolateString`, and recursively reschedules itself with `each` and `transition.duration` to create an ongoing, non-interfering loop.

Mmbostock

81% match

Loading thumbnail…

Transform Interpolation

Two D3 v3 SVG animations demonstrate alternative interpolation of CSS transforms. Left, `d3.interpolateTransform` decomposes transforms canonically, so a transition from "rotate(180)translate(0,-100)" to "rotate(360)translate(0,-100)" animates via a translate-rotate path. Right, a `d3.tween` using `d3.interpolateString` interpolates the raw transform strings, rotating angle only. Each animation cycles with `transition.attrTween` and a recursive `each("end")` handler, with a circle and label centered in each group.

Mmbostock

77% match

Loading thumbnail…

D3 Transitions - Custom Tweens

The example showcases circular transitions of data-driven points using D3.js, contrasting a default linear interpolation with a custom tween that animates along the shortest angular path. Two SVG canvases display circles that jump between random angles on a fixed radius. The left pane uses standard `transition().attr` calls, while the right pane employs a custom `transition().tween()` with D3's `interpolate` to handle angle wrapping and ensure smooth, direct movement across the circumference. The code updates the data on button click, demonstrating the API's flexibility for controlling animation behavior.

SSubhendu Karmakar

77% match

Loading thumbnail…

Concurrent Transitions

Two concurrent D3 transitions animate a single SVG path element rendered as a black cross with a red outline. The *twizzle* transition continuously rotates the path 720 degrees, while the *plonk* transition repeatedly pulses its red stroke-width between 0 and 30 pixels. The code achieves concurrency by running each `transition.tween` on separate dummy objects (`twizzleLock` and `plonkLock`) instead of the path itself, using `d3.interpolateString` to drive the custom tweens and `setTimeout` for looping.

Mmbostock

76% match

Loading thumbnail…

Concurrent Transitions II

A black cross glyph rotates continuously while its red stroke pulses in width. The animation uses concurrent D3 transitions on a parent `g` element and a child `path` element, with `transition.attrTween` interpolating a rotation transform from 0 to 720 degrees and `transition.style` animating `stroke-width` between 30 and 0 pixels. The SVG path is generated with `d3.svg.symbol().type("cross")`.

Mmbostock

76% match

Loading thumbnail…

Path Tween

This example demonstrates smooth path interpolation between two SVG shapes defined by cubic Bézier curves. A black path morphs between two distinct configurations over a two-second animated loop, using SVG’s getPointAtLength and getTotalLength methods to uniformly sample points at four-pixel intervals. The transition replaces the original curve with a polyline for interpolation via d3.interpolate, then restores the Bézier path upon completion. The animation runs in d3 v4 with transition.attrTween, alternating between the two path definitions indefinitely.

Mmbostock

74% match

Loading thumbnail…

Path Tween

This example shows a smooth animated transition between two SVG path shapes, alternating back and forth indefinitely. The code samples both the source and target paths uniformly using the SVG `getPointAtLength` method, then interpolates the corresponding points to create a piecewise linear curve during the transition. After each cycle, the path is restored to its original cubic Bézier form. The animation uses D3 v4’s `transition.attrTween` and `d3.easeLinear` easing, with a precision of 4 pixels for sampling.

GGerardoFurtado

73% match

Loading thumbnail…

Arc Tween

A donut chart demonstrates arc transitions using D3 v4. An orange foreground arc repeatedly animates to a new random end angle, while a static gray background arc represents the full circle. The code uses `transition.attrTween` with a closure that interpolates between the current and target end angles via `d3.interpolate`, updating the bound datum before recomputing the SVG path with `d3.arc`. Rendering is SVG, with transitions triggered every 1.5 seconds by `d3.interval`.

Mmbostock

72% match