在D3中使用圓圈的過渡

Question

我已經設置了一個帶有過渡的D3圓圈動畫。我將最小日期用作初始數據點，將最大日期用作轉換的最終數據點。我的問題是：

我正在使用一個相當大的數據集，恐怕因爲我只告訴過渡從最小到最大，它會錯過所有其他點之間，例如什麼如果圈子A有一個瘋狂的跳躍之間？當我測試它時，它好像跳過了跳躍。

有沒有更好的方法來設置過渡到所有點之間的帳戶？

Answer 1

如果您告訴對象將從最小值轉換爲最大值，那麼它只會尊重這兩個值，正如您所說的那樣，它將跳過其間任何有趣的跳轉。

我猜你目前只是通過推入所有的數據繪製圖表。相反，你可以一步推數據圖表步：

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可能使動畫路徑平滑（如果更新速度快於動畫）。