title: d3.js changing data on click (multiple instances of Donut Chart )
body: <p>I'm trying to make a data visualisation with d3.js. Im new to d3 and i think i did not quite understand completely how to change data with a click, so i need your help!</p>
  
  <p>Thats what i've got so far(which i'm quite happy that it works):</p>
  
  <pre><code> /*-------------------------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);
  </code></pre>
  
  <p>This results in this Visualisation:
  <a href="https://i.stack.imgur.com/ajHbt.png" rel="nofollow noreferrer">Worldmap donut</a> </p>
  
  <p>What i'm now trying to do is to change my Data from "data1995" to "data2015", both "WHI1" to "WHI2" and both "E1" to "E2" with a click on the "test" button. In addition it would be great if they would change with a transition.</p>
  
  <p>I'm not shure if I'm on the right path to accomplish this but is tried this so far:</p>
  
  <pre><code>            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));
                  };
             }
          });
  </code></pre>
  
  <p>Thats what I've found on another thread on here (<a href="https://stackoverflow.com/questions/19717519/update-d3-pie-chart-with-new-data-json">update d3 pie chart with new data.json</a>)
  but in fact i'm not even shure if i translated it right to my script and i'm curious if that would work with all of my instances of the Donut.</p>