すべてのD3アニメーションを無効にする（テスト用）

Question

私はjQuery.fx.off = trueに相当するD3を探しています。

D3を使用するアプリケーションのテスト（Mocha、QUnitなど）を書いているとします。アプリにはD3アニメーションがいくつかあります（.transition()）。

アニメーションはテストでは本当に悪いです。

まず、遅いです。

第2に、非同期であるため、フリッカーテストが容易に発生する可能性があります。理想的には、setTimeout/setInterval/​​への呼び出しを避けたいと考えています。

すべてのD3アニメーションを無効にして、瞬時に（理想的には同期して）終了状態にジャンプする方法はありますか？ （オプションがない場合は、timer.jsにフックできますか？）

Answer 1

d3でそれを行うネイティブな方法はわかりません。アニメーション化する

HTMLコード：しかし、あなたは簡単にD3のプロトタイプを増強することによってアニメーションをスキップするD3セレクタAPIを変更することができ

<svg width="200" height="200"> 
    <rect x="1" y="1" width="0" height="100" /> 
</svg> 

アニメーションとD3-増強コード：

function animate(color){ 
    d3.selectAll("rect") 
    .attr("width", 0).attr("fill", "white") 
    .transition().duration(1000) 
    .attr("width", 100).attr("fill", color) 
} 

function augment(){ 
    // add a duration function to the selection prototype 
    d3.selection.prototype.duration = function(){ return this } 
    // hack the transition function of d3's select API 
    d3.selection.prototype.transition = function(){ return this } 
} 

animate("red") 
console.log("normal animation done") 
setTimeout(function(){ 
     augment() 
     console.log("d3 hacked!") 
     animate("green") 
     console.log("animation skipped") 
}, 1200) 

注意！このハックは完全な解決策として機能しない場合があります。 d3.selection.prototypeで利用できないほかのアプリケーションで使用する他のtransition().*関数でこのソリューションを拡張することもできます。 d3でサポートされている他の形式のアニメーションも考えられます。たぶん私が気付いていない<selection>.transition()以上があります。

Answer 2

あなたが取ることができるアプローチの1つは、MochaまたはQUnitで動作するSinonのようなテストスイートで偽のタイマーを使用することです。ジャスミンには模擬タイマーbuilt inもあります。私はあなたがテストしているコードが（遷移関数を妨害するのではなく）実行中のコードに近いことを意味するので、これをより良い方法と考えています。

Answer 3

遷移を模擬する代わりに、遷移を最終状態に同期して直接実行することもできます。 D3.js V3と前回と

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

、ん：D3.js v4を、使用して

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

もd3 issue 1789参照してください。

Answer 4

あなたがd3.timer機能を模擬することができますように思える：

var d3timer = d3.timer; 

d3.timer = function(callback, delay, then) { 
    d3timer(callback, 0, 0); 
};