如何在d3 V3中使用計時器？

Question

我有一個功能triggerWave()，它使畫布上的點以波形形式生成動畫。我正在使用d3.ease('quad-in')進行緩衝，我想用d3.timer()使triggerWave()函數調用超過200ms時間範圍。我在找到d3.timer上的教程或例子時運氣不佳。

triggerWave() { 
    //function logic 
    let count = 0; 
    let xScale = d3.scale.linear().range([1,2]); // want the value to change from 1 to 2. 
    let zScale = d3.scale.linear().domain([0, 200]); // 200 ms. 
    let value = xScale(d3.ease('quad-in')(zScale(count))); 
    if(count < 200){ 
    count++; 
    d3.timer(() => triggerWave()); 
    } else { 
    // do something 
    } 
    this.wave.next({currentFrame: value}); 
} 

當我如上打電話d3.timer()，該triggerWave()函數被調用無限的時間和永不停歇。我想操縱或控制時間。在我的情況下，我想要爲200ms觸發定時器（）。

如何理解如何使用d3.timer()函數？

Answer 1

在版本3中，沒有d3.timer.stop()功能。您必須在一定時間後返回true以停止計時器。

在赫拉爾多的回答中，他非常好地解釋瞭如何使用d3 timeout這將是您的問題的有效解決方案，即一段時間內反覆調用函數。但看看你對Gerardo的回答的評論，我想你正在尋找別的東西。

這就是我想出了，我認爲這是你在找什麼：

您可以創建一個稱爲activateTriggerWave()將在按鈕上點擊這個函數內部調用另一個函數，可以調用您的triggerWave()方法使用d3 timer。

function activateTriggerWave() { 
    d3.timer(elapsed => { 
    this.triggerWave(); 
    if(elapsed >= 200){ 
    return true; // this will stop the d3 timer. 
    } 
}); 
} 

triggerWave() { 
// here you can do whatever logic you want to implement. 
} 

我希望這會有所幫助。

Answer 2

（編輯：我完全徹底無緣巨大，大「V3」，這是在那裏，在問題的標題對不起，我會在這裏繼續這個答案作爲參考V4的用戶。）

由於您在triggerWave函數本身內部調用triggerWave，因此您不需要d3.timer，而是使用d3.timeout。按照API，d3.timeout：

如定時器，除了定時自動停止在其第一個回調。保證不會在後臺運行的setTimeout的合適替代品。回調將通過經過的時間。

另外，請注意，每次函數運行時都會重置count，這是行不通的。設置其初始值外部的功能。

下面是演示了這些更改。我打電話的功能，每200毫秒，直到count到達50：

var p = d3.select("p") 
 
var count = 0; 
 

 
triggerWave(); 
 

 
function triggerWave() { 
 
    p.html("Count is " + count) 
 
    if (count < 50) { 
 
    count++; 
 
    d3.timeout(triggerWave, 200) 
 
    } else { 
 
    return 
 
    } 
 
}

<script src="https://d3js.org/d3.v4.min.js"></script> 
 
<p></p>

您還可以通過d3.timeout保持的總時間軌跡，使用傳遞給triggerWave參數：

var p = d3.select("p") 
 
var count = 0; 
 
var elapsed = 0; 
 
var format = d3.format(".2") 
 

 
triggerWave(); 
 

 
function triggerWave(t) { 
 
    elapsed = t ? elapsed + t : elapsed; 
 
    p.html("Count is " + count + ", and the elapsed time is " + format(elapsed/1000) + " seconds") 
 
    if (count < 50) { 
 
    count++; 
 
    d3.timeout(triggerWave, 200) 
 
    } else { 
 
    return 
 
    } 
 
}

<script src="https://d3js.org/d3.v4.min.js"></script> 
 
<p></p>

由於您正在使用D3 v3，並且因爲v3中沒有d3.timeout，所以您可以使用vanilla JavaScript執行相同的操作：setTimeout。

這裏是一個演示：

var p = d3.select("p") 
 
var count = 0; 
 

 
triggerWave(); 
 

 
function triggerWave() { 
 
    p.html("Count is " + count) 
 
    if (count < 50) { 
 
    count++; 
 
    setTimeout(triggerWave, 200) 
 
    } else { 
 
    return 
 
    } 
 
}

<script src="https://d3js.org/d3.v3.min.js"></script> 
 
<p></p>