title: Each Selection in D3 Pie Chart
body: <p>currently I am trying to design dynamic pie chart whereby the pie chart's slices will change according to the random generated data. Below is the code.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var dataset = [
      { name: 'Smooth', percent: 40.00, class: 'custom-normal' },
      { name: 'Moderate', percent: 10.00, class: 'custom-warning' },
      { name: 'Heavy', percent: 50.00, class: 'custom-danger' }
  ];
  var width = 960,
      height = 500,
      radius = Math.min(width, height) / 2; //Math.min return the smallest value between width and height (for optimization purposes)
  
  var colorValues = d3.scaleOrdinal().domain(["Smooth", "Moderate", "Heavy"]).range(["#605A4C", "#ff9900", "#ff1a1a"]);
  var percent = "percent"; //predefine the legend of dataset (the string index)
  var category = "class";
  var name = "name";
  
  var pie = d3.pie()
      .value(function(d) { return d[percent]; })
      .sort(null)
      .padAngle(.02); //the gap
  
  var arc = d3.arc()
      .innerRadius(radius - 100) //optimization
      .outerRadius(radius - 20); //optimization
  
  var svg = d3.select("#chart")
      .append("svg")
      .attrs({
          width: width,
          height: height,
          class: "shadow"
      }).append("g")
      .attrs({
          transform: 'translate(' + width / 2 + ',' + height / 2 + ')'
      });
  svg.append('g')
      .attrs({
          class: 'slices'
      });
  
  var path = svg.select('.slices')
      .selectAll('path')
      .data(pie(dataset))
      .enter().append('path')
      .attrs({
          d: arc
      }).each(function(d, i) {
          this._current = d;
          console.log(this._current);
          console.log('okay!');
      }).attrs({
          class: function(d, i){
          return d[category];
          },
          fill: function(d, i) {
              console.log("this is color value" + colorValues());
              return colorValues(d[i]);
          }
      }); //initial details (this._current)
  
  
  var randomGenerator = setInterval(function() {
      var data = dataset.map(function(d, i) {
          for (var key in d) {
              if (d[key] === "Smooth") {
                  //console.log("smooth");
                  dataset[0].percent = Math.floor(Math.random() * 100);
                  //console.log(dataset[0].percent);
              } else if (d[key] === "Moderate") {
                  dataset[1].percent = Math.floor(Math.random() * 100);
                  //console.log(dataset[1].percent);
                  //console.log("moderate");
              } else if (d[key] === "Heavy") {
                  dataset[2].percent = Math.floor(Math.random() * 100);
                  //console.log(dataset[2].percent);
                  //console.log("heavy");
              }
          }
  
      });
  
  }, 3000);
  
  
  var timer = setInterval(function() {
      pie.value(function(d) {
          return d[percent];
      }); // change the value function
      path = path.data(pie(dataset)); // compute the new angles
      path.transition().duration(750).attrTween("d", arcTween); // redraw the arcs
  }, 3000);
  
  
  // Store the displayed angles in _current.
  // Then, interpolate from _current to the new angles.
  // During the transition, _current is updated in-place by d3.interpolate.
  function arcTween(a) {
      var i = d3.interpolate(this._current, a);
      console.log(this._current);
      this._current = i(0);
      return function(t) {
          return arc(i(t));
      };
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
      font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
      margin: auto;
      position: relative;
      width: 960px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;meta charset="utf-8"&gt;
  &lt;div id="mydiv" class="widget"&gt;
      &lt;div id="chart" class="Chart chart-container"&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;script src="https://d3js.org/d3.v4.js"&gt;&lt;/script&gt;
  &lt;script src="https://d3js.org/d3-selection-multi.v0.4.min.js"&gt;&lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>Notice that the color of each slices is not scaled according to what I have defined earlier. i.e. :<code>var colorValues = d3.scaleOrdinal().domain([&quot;Smooth&quot;, &quot;Moderate&quot;, &quot;Heavy&quot;]).range([&quot;#605A4C&quot;, &quot;#ff9900&quot;, &quot;#ff1a1a&quot;]);</code>. I believe it should be the selection problem, however I found no clue on that. And yet, the class as well, it only get the first row of data in <code>var dataset</code> and apply to all.</p>