d3js 过渡阶跃函数答案

【问题标题】：d3js transition step functiond3js 过渡阶跃函数
【发布时间】：2012-10-16 02:20:17
【问题描述】：

我在 d3js 中使用了过渡效果，效果很好。但是，有没有办法在每次更新对象位置时触发函数？（每一步）

这是一段假代码：

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

我知道如果你把 each(type, fn) 你可以从 end 和 start 获取事件。但没有可用的步骤。

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

有没有办法做到这一点？

【问题讨论】：

标签： javascript d3.js transition

【解决方案1】：

从documentation 看来，tweens 在每一步都会被评估。

在过渡运行时，它的补间被重复调用，t 的值从 0 到 1 不等。除了延迟和持续时间之外，过渡还可以轻松控制时间。缓动会扭曲时间，例如慢进和慢出。一些缓动函数可能会暂时给出大于 1 或小于 0 的 t 值；但是，结束时间总是恰好为 1，因此结束值恰好在转换结束时设置。过渡根据其延迟和持续时间之和结束。当过渡结束时，补间在最后一次被调用，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 时执行您的操作。

【讨论】：