4

我在 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'); });

有没有办法做到这一点？

4

1 回答 1

4

从文档来看，这听起来像是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输入时执行您的操作。

于 2012-10-26T09:35:08.650 回答