Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Disabling all D3 animations (for testing)

Tags:

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?)

like image 845
Jo Liss Avatar asked Jan 21 '13 17:01

Jo Liss


People also ask

Is there a way to disable all D3 animations?

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 ?) d3.timer.flush () may help. An alternative to mocking out transitions is executing them synchronously directly to their final state.

What is transition animation in D3?

In this case, an animation would be a transition between the starting and ending states of the DOM element. The d3.selection.transition () method indicates the start of transition and then different transition functions can be applied to the selected elements.

How to avoid flickering when writing D3 tests?

Say you are writing tests (with Mocha, QUnit, etc.) for an app that uses D3. The app has some D3 animations (with .transition () ). 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.

How to use d3-force without visualization?

we can also let d3-force go through many simulation steps and only use a ‘final’ result to visualize (or not even to visualize) the eventual positions of the elements in the system used for simulation d3-force can be used without any other part of d3 and without any degree of visualization.


1 Answers

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.

like image 82
rbu Avatar answered Oct 30 '22 19:10

rbu