Disabling all D3 animations (for testing)

animation, d3.js

Solution

An alternative to mocking out transitions is executing them synchronously directly to their final state.

With D3.js v4, use:

function flushAllD3Transitions() {
    var now = performance.now;
    performance.now = function() { return Infinity; };
    d3.timerFlush();
    performance.now = now;
 }

With D3.js v3 and previous, do:

function flushAllD3Transitions() {
    var now = Date.now;
    Date.now = function() { return Infinity; };
    d3.timer.flush();
    Date.now = now;
 }

See also d3 issue 1789.

Problem

I'm looking for a D3 equivalent to `jQuery.fx.off = true`. Say you are writing tests (with Mocha, QUnit, etc.) for an app that uses D3. The app has some D3 animations (with `.transition()`). Animations are really bad for tests: First, they are slow. Second, because they are asynchronous, they can easily cause flickering tests. Ideally, you'd want to avoid any calls to `setTimeout` / `setInterval` / `requestAnimationFrame`. Is there a way to disable all D3 animations, so that they instantly (and ideally, synchronously) jump to the end state? (Perhaps if there's not an option, we can hook into timer.js?)

Original source