[英]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.