d3.js改變點擊數據（甜甜圈圖的多個實例）

我想用d3.js做一個數據可視化。即時通訊新的D3，我想我不完全理解如何通過點擊更改數據，所以我需要你的幫助！d3.js改變點擊數據（甜甜圈圖的多個實例）

多數民衆贊成我已經這麼遠（這我很高興，它的工作原理）：

/*-------------------------data is parsed and proceedet above----------------------------------------------------*/ 

     var SVGWidth = 1670; 
     var SVGeight = 800; 
     var kreis = 1; 
     var ringArea = 1; 
     var width = 1; 
     var multi = 3.5; 


     var color = d3.scale.ordinal().range(['#FFFFFF', '#DADAD9', '#9D9C9C']); 
     var arc = d3.svg.arc().innerRadius(function(d) { 
      donutWidth = Math.sqrt(d.data.WHI1/Math.PI + Math.pow(d.data.E1, 2)) * multi - d.data.E1 * multi 
      return donutWidth; 
     }).outerRadius(function(d, i) { 
      width = Math.sqrt(d.data.WHI1/Math.PI + Math.pow(d.data.E1, 2)) * multi 
      return width; 
     }); 
     var pie = d3.layout.pie().value(function(d) { 
      return d.country; 
     }).sort(null); 

     var svg = d3.select('#chart') 
     .append('svg') 
     .attr('width', SVGWidth) 
     .attr('height', SVGeight) 
     .append("g") 

     svg.selectAll("g") 
     .data(data1995). 
     enter().append("g") 
     .attr({ 
      transform: function(d, i) { 
       var pos = coord2Pt(geo[i][1], geo[i][2], 1.0); 
       return "translate(" + pos.x + ", " + pos.y + ")"; 
      } 
     }).selectAll('path').data(function(country, i) { 
      return pie(country.map(function(value) { 
       return { 
        country: value, 
        WHI1: WHI1[i], 
        E1: E1[i] 
       }; 
      })); 
     }) 
     .enter() 
     .append('path') 
     .attr('d', function(d) { 
      return arc(d); 
     }).attr('fill', function(d, i) { 
      return color(i); 
     }); 
    }); 
})(window.d3);

這導致了這個可視化： Worldmap donut

什麼，我現在正在試圖我只需點擊「測試」按鈕，即可將數據從「data1995」更改爲「data2015」，將「WHI1」更改爲「WHI2」，將「E1」更改爲「E2」。另外，如果他們會隨着轉變而改變，那將是非常好的。

如果我在正確的道路上做到這一點，但嘗試這個到目前爲止我不舒爾：

  d3.select("button").on('click', function() { 
      console.log("click") 
      d3.selectAll('path').transition().duration(500).attr("fill", function(d, i) { 
       return color(i); 
      }).attr("d", arc).each(function(d) { 
       this._current = d; 
      }); 

      function change(data2015) { 
       return pie(country.map(function(value) { 
        return { 
         country: value, 
         WHI2: WHI2[i], 
         E2: E2[i] 
        }; 
       })); 
       path.transition().duration(750).attrTween("d", arcTween); // redraw the arcs 
      } 

      function arcTween(a) { 
       var i = d3.interpolate(this._current, a); 
       this._current = i(0); 
       return function(t) { 
        return arc(i(t)); 
       }; 
      } 
     });

那是什麼，我在另一個線程發現這裏（update d3 pie chart with new data.json）但事實上，如果我把它翻譯成我的劇本，我甚至不會感到舒服，而且我很好奇，如果那可以與我所有的甜甜圈實例一起工作。

來源

2016-01-20 Pino