Question

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

这是一些假代码：

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

我知道如果你把每个（type，fn）放在一起，你就可以从最后开始获取事件。但是没有步骤可用。

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

有办法做到这一点吗？

Answer 1

从documentation开始，每个步骤都会评估tweens tween。

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

所以我想你可以尝试添加一个自定义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

但是，由于each("end", function() { nextStep(...) })是用于插值的，因此将它们用于其他内容可能是一个坏主意并且滥用了api。

您是否考虑过使用多阶段过渡？这将是您添加nextStep并nextStep开始新转换的地方之一。然后，您可以缩短各个过渡的持续时间，并在输入{{1}}时执行操作。

d3js过渡步骤功能

1 个答案: