[英]d3js transition step function
I am using transitions in d3js and it works fine. 我正在使用d3js中的过渡,它工作正常。 However, is there a way to fire a function everytime the object position is updated? 但是,每次更新对象位置时,有没有办法触发函数? (for every step) (每一步)
Here is a some fake code: 这是一些假代码:
obj.transition()
.ease('quad')
.durantion(250)
.attr('cy', function(d) {
return d*d;
});
I know that if you put the each(type, fn) you can get the events from end and start. 我知道如果你把每个(类型,fn)你可以从结束和开始得到事件。 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'); });
Is there a way to do this? 有没有办法做到这一点?
From the documentation it sounds like tweens
are evaluated at every step. 从文档中可以tweens
,每个步骤都会评估tweens
。
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. 当转换运行时,它的补间被重复调用,其值为0,范围从0到1.除了延迟和持续时间之外,转换还可以轻松控制时序。 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; 一些缓动函数可能暂时给出t大于1或小于0的值; however, the ending time is always exactly 1 so that the ending value is set exactly when the transition ends. 但是,结束时间始终精确为1,以便在转换结束时准确设置结束值。 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. 转换结束时,在t = 1的最后时间调用补间,然后调度end事件。
So I suppose what you could try is add a custom tween
function maybe like this: 所以我想你可以尝试添加自定义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;});
However, since tweens
are intended for interpolation, using them for something else is probably a bad idea and an abuse of the api. 但是,由于tweens
用于插值,将它们用于其他东西可能是一个坏主意和滥用api。
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. 那将是你添加一个each("end", function() { nextStep(...) })
并且nextStep
开始一个新的转换。 You could then shorten the durations of the individual transitions and perform your actions whenever nextStep
is entered. 然后,您可以缩短单个过渡的持续时间,并在输入nextStep
时执行操作。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.