D3餅圖轉換

Question

我正在研究D3js中的轉換，試圖讓他們使用從a Mike Bostock example派生的簡單餅圖工作。

我想將餅圖中的數據從數據轉換爲data2，但圖表不更新。

這是過渡聲明：

path.selectAll("path").data(pie(data2)).transition().duration(2000); 

我缺少什麼？

編輯

我已經得到了它與下面的工作。現在我想明白爲什麼這是行得通的。我理解.attr（「d」，arc）部分，但爲什麼我需要選擇All（「path」）？

path.selectAll("path").data(pie(data2)).transition().duration(2000).attr("d",arc); 

編輯完

完整的代碼（JSFiddle here）：

var width = 200, 
    height = 200, 
    radius = Math.min(width, height)/2; 

var color = d3.scale.category20(); 
var data = [2, 19, 18, 99, 100]; 
var data2 = [100, 1200, 20, 88, 12]; 

var pie, arc, svg, path, data; 

var chartCanvas = d3.select("#chart") 
    .append("svg") 
    .attr("width", width) 
    .attr("height", height); 


var path = chartCanvas 
    .append("g") 
    .attr("transform", "translate(" + width/2 + "," + height/2 + ")"); 



function setupPieChart() { 

    pie = d3.layout.pie() 
     .value(function (d) { 
      return d; 
     }) 
     .sort(null); 

    arc = d3.svg.arc() 
     .innerRadius(radius - 100) 
     .outerRadius(radius - 20) 

    path 
     .selectAll("path") 
     .data(pie(data)) 
     .enter() 
     .append("path") 
     .attr("fill", function (d, i) { 
      return color(i); 
     }) 
     .attr("d", arc) 
     .each(function (d) { 
         this._current = d; 
     }); // store the initial angles 
    console.log(path); 

} 

setupPieChart(); 

console.log(path); 

path.selectAll("path").data(pie(data2)).transition().duration(2000); 

Answer 1

我立即發現您缺少更新過程的一些重要部分。您複製了原始代碼，但您忘記了更新部分:-)。我可以說，因爲我在代碼中看到了你存儲的初始角度。

再次查看代碼here並嘗試瞭解arcTween函數。更多信息可以在here找到。你需要一個弧補間函數來計算基於初始角度的新角度（這就是爲什麼你首先存儲初始角度的原因:-)。

我現在不會做小提琴，因爲在我的經驗中，如果你想了解補間圓弧功能，你會學到更多東西（就像我做過here。這是我個人項目的鏈接，但是隨意複製代碼，如你所見）。

您需要.selectAll（「路徑」），因爲那些是將要更新的實際元素。在做D3時，試着想一下圖表元素如下：元素不可見（這是enter collection），現在可見的元素（可以看作更新集合）以及可以被刪除的元素（出口收集）。

您需要根據要顯示的數據查看這些元素。 D3是數據驅動的文檔，因此所有內容都與您要在屏幕上顯示的數據有關：如果您有數據但尚未包含任何元素，則可以「輸入」元素。因此，您可以選擇一些不在DOM中的元素，但很快就會出現，因爲您會將它們綁定到您擁有的數據。

如果屏幕上已經有元素，並且元素的數量與需要顯示的數據相匹配（例如：var data = [20，30，40]，那麼您在這裏獲得3個數據用於3個div在屏幕上，你有一個匹配的數量），然後d3會更新你的選擇（因此更新集合或更新選擇），以便元素屬性匹配數據。

如果屏幕上有更多元素，那麼就會顯示數據，然後您可以退出元素（因此退出選擇或收集）。我希望這樣做更清楚一點，它也有意義:-)

Answer 2

.transition開始爲屬性的transition變化率（s）後聲明。你在.transition之後沒有設置/做任何事情，所以沒有內容可以插入。在來自Mike的原始示例中，您會看到他在開始轉換後設置了d屬性，指定custom interpolator (arcTween)