簡單的d3.js餅圖轉換*沒有*數據連接？

Question

我正在處理一年一年絕對相同的數據集，並且我想要製作一個每年都有動畫過渡的D3餅圖。數據是一個二維數組，每個內部數組是一年。因爲值的數量沒有變化，所以我認爲我可以替換轉換的數據集，並且不需要進行數據連接（？）。

我有餅圖最初運行良好，我通過點擊事件更新數據。但我的轉換不起作用。這裏的第一個餅圖（有變量聲明和其他數據管理，我已經離開了，以節省空間，因爲這些東西的工作）的代碼：

var outerRadius = w/2; 
var innerRadius = 0; 
var arc = d3.svg.arc() 
       .innerRadius(innerRadius) 
       .outerRadius(outerRadius); 
var svg= d3.select("body") 
       .append("svg") 
       .attr("width", w) 
       .attr("height", h); 

var arcs = svg.selectAll("g.arc") 
       .data(pie(datamod[0])) 
       .enter() 
       .append("g") 
       .attr("class", "arc") 
       .attr("transform", "translate(" + outerRadius + ", " +outerRadius + ")"); 

arcs.append("path") 
      .attr("fill", function(d,i){ 
       return colors[i]; 
      }) 
      .attr("d", arc); 

然後更新... clickToChange（ ）在用戶點擊正文中的任何位置時被調用。它會從二維數組中的下一個位置加載新數據，並且還會更新一年中的文本，並且在此處有一些代碼可以防止它在重新啓動時運行...但我認爲的主要問題是代碼更新弧...

   function clickToChange() 
     { if(!isRunning) 
      { 
      isRunning = true; 
      myTimer =setInterval(function() {if (yearcounter < 11) 
       { 
        yearcounter++; 
       } 
       else 
       { 
        yearcounter = 0; 
        stopDisplay(); 
       } 

       var thisyear = 2000 + yearcounter;    //updating happens here...  
       svg.selectAll("g.arc") 
           .data(pie(datamod[yearcounter])) 
           .transition() 
           .attr("class", "arc") 
           .attr("transform", "translate(" + outerRadius + ", " +outerRadius + ")"); 

       arcs.attr("fill", function(d,i){ 
           return colors[i]; 
           // console.log(d.value); 
           //    return "rgb(" + colorscale(d.value) + ",50,50)"; 

          }) 
          .attr("d", arc); 

        document.getElementById('year').innerHTML = thisyear; 
     }, 2000); //end set interval 
     }//end if 
    } 

    function stopDisplay() 
    { 
    clearInterval(myTimer); 
    isRunning = false; 
    } 

我認爲問題是，我可能不是正確的數據綁定到正確的要素，如果我使用了正確的符號選擇圓弧？

Answer 1

好的，我可以看到您的方法有多個問題/缺點。

1）在你的代碼：

arcs.append("path") 
    .attr("fill", function(d,i){ 
     return colors[i]; 
    }) 
    .attr("d", arc); 

arc是，你正在實際上並不存在於你與我們分享代碼的函數調用，或者您需要寫。您多次調用此函數，因此需要解決此問題。

2）我會檢查使用.on("click", function(d,i) { do your transitions here in this function call });方法，而不是設置每個項目的過渡和屬性。我發現如果你開始對轉換做更多的事情，它會使轉換調用更容易管理。你可以在http://bl.ocks.org/mbostock/4062006

中看到我在「和絃圖」中意思的例子。希望這可以幫助你一點。