[英]Transitions with circles in D3
我已经设置了一个带有过渡的 D3 圆形动画。 我使用最小日期作为初始数据点,使用最大日期作为转换的最终数据点。 我的问题是:
我正在使用一个相当大的数据集,我担心因为我只是告诉从最小值到最大值的过渡,它会错过中间的所有其他点,例如如果圆 A 有一个疯狂的跳跃怎么办之间? 当我测试它时,它似乎只是跳过了跳跃。
有没有更好的方法来设置过渡以考虑两者之间的所有点?
如果您告诉对象从 min 转换为 max,它只会尊重这两个值,并且如您所说,它将跳过中间的任何有趣的跳跃。
我猜您目前通过推入所有数据来绘制一次图表。 相反,您可以逐步将数据推送到图表:
var data = [{id: o1, v: []}, {id: o2, v: []}]; // values for 2 objects
function getTransform(d) {
return "translate(" + d.v[d.v.length-1] + ")";
}
function update() {
var elems = d3.selectAll(...).data(data, function(d) {return d.id;})
elems.enter()
.append(...) //append DOM/SVG objects and
.attr(...) //initalize their start values and
.attr("transform", getTransform ) //their start animation values
// animate the existing elements to move to their new values
elems.transition().attr("transform", getTransform )
}
function play(){
// pushing in "crazy" values
data[0].v.push( Math.random()*10 );
data[1].v.push( Math.random()*10 );
update();
}
setTimeout(play, 500)
setTimeout(play, 1000)
setTimeout(play, 1500)
基本思想是不要一次将所有数据扔到 d3,而是按照您希望动画的顺序和及时性添加数据。
此外,或者您可以设置时间索引并在getTransform
函数中使用它来为您想要的任何状态设置动画。 如果你一步一步地这样做,你就可以让动画使用你的“疯狂”值。
var time = 0;
var maxTime = 2;
function getTransform(d) {
return "translate(" + d.v[time] + ")";
}
function next(){
update();
if(time++ < maxTime) setTimeout(next, 500)
}
play(); play(); play(); // add some data ;)
next() // start index based playback from `time` to `maxTime`
您可能需要将超时值500
与所需的动画duration(..)
速度相匹配,以使动画达到您的疯狂峰值。 否则 d3 可能会平滑动画路径(如果更新速度比动画速度快)。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.