使用具有更多值的新數據集更新餅圖

即Mike Bostock教程。 http://bl.ocks.org/mbostock/1346410

但是我有一個問題，就是從一個數據集更新到另一個數據集，第二個數據集比第一個數據集多得多。

我已經經歷了一個更新功能，但沒有運氣嘗試這個無數次，我會保持簡單，給一個假設的例子，可以說，我的第一個數據集有5個值

[1,2,3,4,5]

和我的第二個數據集有10個值

[1,2,3,4,5,6,7,8,9,10]

只有5個新數據集的值將在動態更新後的弧上描繪。這就像餡餅是固定的，只有5個弧段可以顯示新數據集的5個值。

任何幫助將不勝感激，因爲它一直在這個想法的絆腳石！

來源

2014-01-30 spleedo

在這裏，我做了一個簡單的更新，當您單擊餅圖上面的文本觸發：JsFiddle
發生的主要事情是當.on("click")事件觸發所有的數據被更新，所以這個表得到像這樣更新：

d3.select("#update") 
.on("click", function (d) { 
    data = [1,2,3,4,5,6,7,8,9,10]; 
    vis.data([data]); 
    arc = d3.svg.arc().outerRadius(r); 
    pie = d3.layout.pie().value(function(d){return d; }); 
    arcs.data(pie) 
     .enter() 
     .append("svg:g") 
     .attr("class", "slice") 
     .append("svg:path") 
     .attr("fill", function(d, i){return color(i);}).attr("d", arc); 
});

來源

2014-01-30 17:38:40 tomtomtom

使其處理不同大小數據的關鍵是處理.enter()和.exit()選擇。這個tutorial更詳細一些，但簡要地說，輸入選擇表示沒有DOM元素存在的數據（例如，在您傳遞更多數據的情況下），更新選擇（您已經處理的）表示數據，DOM元素存在以及不再有數據存在的退出選擇DOM元素（例如，當您有更多元素開始時）。

所以在你的change函數中，你需要做這樣的事情。

function change() { 
    clearTimeout(timeout); 

    var path = svg.datum(data).selectAll("path") 
    .data(pie); 
    path.enter().append("path") 
    .attr("fill", function(d, i) { return color(i); }) 
    .attr("d", arc) 
    .each(function(d) { this._current = d; }); // add the new arcs 
    path.transition().duration(750).attrTween("d", arcTween); // redraw the arcs 
    path.exit().remove(); // remove old arcs 
}

這假定您要更新data變量，你在上面建議得到從現有的數據結構不同的值作爲例子來代替。

來源

2014-01-30 18:20:27

使用具有更多值的新數據集更新餅圖

回答

相關問題