Animation 禁用所有D3动画（用于测试）

我在找一个D3，相当于

假设您正在为使用D3的应用程序编写测试（使用Mocha、QUnit等）。该应用程序有一些D3动画（带有

.transition（）

）

动画对于测试来说非常糟糕：

首先，他们很慢

其次，因为它们是异步的，所以很容易引起闪烁测试。理想情况下，您应该避免调用

setTimeout

/

setInterval

/

requestAnimationFrame

---

有没有办法禁用所有D3动画，以便它们立即（理想情况下是同步）跳转到结束状态？（也许如果没有选择，我们可以加入？

我不知道在d3中有什么本地方法可以做到这一点。但是，通过增加d3原型，您可以轻松修改d3选择器API以跳过动画：

要设置动画的HTML代码：

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

注意此黑客可能无法为您提供完整的解决方案。您可能希望使用其他

transition（）.*

函数扩展此解决方案，这些函数在

d3.selection.prototype

上不可用，并且在应用程序中使用。

---

您还可以考虑D3支持的其他动画形式。可能我不知道的不止是

.transition（）

。

您可以采取的一种方法是在测试套件中使用一个假的计时器，例如，它可以与Mocha或QUnit一起使用。茉莉花还有一个模拟计时器。我认为这是一种更好的方法，因为这意味着您正在测试的代码更接近正在运行的代码（而不是破坏转换函数）。

模拟转换的另一种方法是直接同步执行转换到其最终状态

对于D3.js v4，请使用：

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

对于D3.js v3及以前版本，请执行以下操作：

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

---

另请参见。

您似乎可以模拟d3。计时器功能：

var d3timer = d3.timer;

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

---

可能会有帮助。有关第4版的d3，请参阅此。

var d3timer = d3.timer;

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