d3js过渡步骤功能

问题描述

我在d3js中使用过渡，它工作正常。但是，每次更新对象位置时，有没有办法触发函数？ （每一步）

I am using transitions in d3js and it works fine. However, is there a way to fire a function everytime the object position is updated? (for every step)

这是一些假代码：

obj.transition()
  .ease('quad')
  .durantion(250)
  .attr('cy', function(d) {
    return d*d;
   });

我知道如果你把每个（类型，fn）你可以从结束和开始。但没有步骤可用。

I know that if you put the each(type, fn) you can get the events from end and start. But no step is available.

obj.transition()
  .ease('quad')
  .duration(250)
  .attr('cy', function(d) {
    return d*d;
   })
  .each('start', function(d) { console.log('x'); });

有办法吗？

推荐答案

从中听起来像 tweens 在每一步都会被评估。

From the documentation it sounds like tweens are evaluated at every step.

所以我假设您可以尝试添加自定义补间函数可能是这样的：

So I suppose what you could try is add a custom tween function maybe like this:

obj.transition()
 .tween("customTween", function() {
     console.log("This is the tween factory which is called after start event");
     return function(t) {
        console.log("This is the interpolating tween function");
     };})
  .ease("quad")
  .durantion(250).attr("cy", function(d){
    return d*d;});

但是，因为补间用于插值将它们用于别的东西可能是一个坏主意和滥用api。

However, since tweens are intended for interpolation, using them for something else is probably a bad idea and an abuse of the api.

您是否考虑过使用多阶段过渡？那将是你添加每个（结束，函数（）{nextStep（...）}）和 nextStep 开始新的转换。然后，只要输入 nextStep ，您就可以缩短各个过渡的持续时间并执行操作。

Have you considered using a multi-stage transition? That would be one where you add an each("end", function() { nextStep(...) }) and the nextStep starts a new transition. You could then shorten the durations of the individual transitions and perform your actions whenever nextStep is entered.

这篇关于d3js过渡步骤功能的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！