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

Question

我有一個函數triggerWave() ，它使畫布上的點以波形形式生成動畫。 我正在使用d3.ease('quad-in')進行緩動，我想使用d3.timer()在200ms時間范圍內調用triggerWave()函數。 我很難找到關於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()函數被無限次調用並且永不停止。 我想操縱或控制時間。 在我的情況下，我想讓timer（）被觸發200ms 。

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

Answer 1

（ 編輯 ：我完全和完全錯過了那個巨大的，大的“ 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> 

您還可以使用triggerWave傳遞給triggerWave的參數來跟蹤總triggerWave d3.timeout ：

 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> 

Answer 2

在版本3中，沒有d3.timer.stop()函數。 您必須在一段時間后返回true才能停止計時器。

在Gerardo的回答中，他非常精巧地解釋了如何使用d3 timeout ，這將是您問題的有效解決方案，即在一段時間內反復調用該函數。 但是看看你對Gerardo答案的評論，我認為你正在尋找其他的東西。

這就是我想出來的，我認為這就是你要找的東西：

您可以創建另一個名為activateTriggerWave()函數，該函數將在單擊按鈕時調用，在此函數內部，您可以使用d3 timer調用您的triggerWave()方法。

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 3

我使用d3.js v3 ，任何用戶操作都可以停止計時器。 在d3.js文檔中，它顯示為使用它：

d3.timer(function(elapsed) {
  console.log(elapsed);
  return elapsed >= 1000;
});

我有幾個例子，其中動畫是永遠的 ，沒有理由設置它的限制。 檢查帶有stop()的獨立d3.timer ，我發現它與v3工具集中包含的默認計時器相比表現得相當慢，可能是因為某些版本不兼容。

解決方案是用於：

var timer_1_stop=false;

將其設置為頁面范圍中的全局var可訪問。 然后計時器：

const run=function(){
  //...
  d3.timer(function() {
    voronoi = d3.geom.voronoi(points).map(function(cell) { return bounds.clip(cell); });
    path.attr("d", function(point, i) { return line(resample(voronoi[i])); });

    return timer_1_stop;
  });
}

const stopVoro=function(){
  timer_1_stop=true;
}

它允許：

class Menu extends React.Component {
  render(){
    return(<ul>
      <li><span onClick={()=>{stopVoro()}}>StopVoro</span></li>
    </ul>)
  }
}