d3js过渡步骤函数

Question

我正在使用d3js中的转换效果，它运行良好。但是，是否有一种方法可以在每次更新对象位置时（每一步）触发一个函数？

以下是一些虚假代码：

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

我知道如果你使用each(type, fn)方法，你可以获取事件从末尾和开头的顺序，但是没有步骤可用。

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

有没有办法做到这一点？

- PCoelho

Answer 1

从文档中可以得知，tweens在每一步都会被调用。

在过渡运行时，tweens会重复地使用t值调用，t的范围从0到1。除了延迟和持续时间外，转换具有缓动来控制时间。缓动扭曲时间，例如缓入和缓出。有些缓动函数可能暂时给出大于1或小于0的t值；然而，结束时间始终为1，以便在转换结束时准确设置结束值。转换的结束基于其延迟和持续时间之和。当转换结束时，tweens会最后一次使用t=1进行调用，然后分派结束事件。

所以我想你可以尝试添加自定义tween函数，例如：

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;});

然而，由于tweens旨在进行插值，将它们用于其他目的可能是一个坏主意，也是对api的滥用。

您考虑过使用多阶段转换吗？这将是一种您添加each("end", function() { nextStep(...) })并且nextStep启动新转换的方式。然后，您可以缩短单个转换的持续时间，并在进入nextStep时执行操作。

- cyon