d3js过渡步骤功能 [英] d3js transition step function

问题描述

我在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.

转换运行时，重复调用其补间，其值为0，范围为0到1.除延迟和持续时间外，转换能够轻松控制时机。缓和会扭曲时间，例如慢进和慢进。一些缓动函数可能暂时给出t大于1或小于0的值;但是，结束时间始终精确为1，以便在转换结束时准确设置结束值。转换基于其延迟和持续时间的总和而结束。转换结束时，最后一次t = 1调用补间，然后调度end事件。

While the transition runs, its tweens are repeatedly invoked with values of t ranging from 0 to 1. In addition to delay and duration, transitions have easing to control timing. Easing distorts time, such as for slow-in and slow-out. Some easing functions may temporarily give values of t greater than 1 or less than 0; however, the ending time is always exactly 1 so that the ending value is set exactly when the transition ends. A transition ends based on the sum of its delay and duration. When a transition ends, the tweens are invoked a final time with t = 1, and then the end event is dispatched.

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

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过渡步骤功能的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！