如何在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>)
  }
}