score:1

There's many ways to do what you want. Here's a quick refactor of your second example:

<html>

<head>
  <script type="text/javascript" src="https://d3js.org/d3.v3.min.js"></script>
  <title></title>

  <body>
    <div id="duration">
      <svg style="height:300px;width:100%"></svg>
      <button class="random">Random Inner</button>
      <button class="random">Random Outer</button>
    </div>

    <script type="text/javascript">
    
      var dataset = {
        apples: [13245, 28479, 11111, 11000, 3876],
        oranges: [53245, 28479, 19697, 24037, 19654],
      };

      var width = d3.select('#duration').node().offsetWidth,
        height = 300,
        cwidth = 33;

      var color = [
        ['#1352A4', '#2478E5', '#5D9CEC', '#A4C7F4', '#DBE8FB'],
        ['#58A53B', '#83C969', '#A8D996', '#CDE9C3', '#E6F4E1']
      ];

      var pie = d3.layout.pie()
        .sort(null);

      var arcs = [d3.svg.arc()
        .innerRadius(95)
        .outerRadius(cwidth * 2.5),
        d3.svg.arc()
        .innerRadius(70 + cwidth)
        .outerRadius(cwidth * 3.5)
      ];

      var svg = d3.select("#duration svg")
        .append("g")
        .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

      var gs = svg.selectAll("g")
        .data(d3.values(dataset))
        .enter()
        .append("g")
        .attr("class", function(d, i) {
          return i === 0 ? "inner" : "outer";
        });

      var path = gs.selectAll("path")
        .data(function(d, i) {
          return pie(d);
        })
        .enter().append("path")
        .attr("fill", function(d, i, j) {
          return color[j][i];
        })
        .attr("d", function(d, i, j) {
          return arcs[j](d);
        });

      d3.selectAll(".random").on("click", function(d, i) {
        
        var slices = i === 0 ? d3.selectAll(".inner>path") : d3.selectAll(".outer>path");

        var randData = pie(d3.range(5).map(function() {
          return Math.random() * 1000;
        }));

        randData.forEach(function(d, i) {
          d._current = slices.data()[i];
        })

        slices
          .data(randData)
          .transition().duration(1000)
          .attrTween("d", function(d) {
            var interpolate = d3.interpolate(d._current, d);
            return function(t) {
              return arcs[i](interpolate(t));
            };
          })

      })
    </script>
  </body>

</html>


Related Query

More Query from same tag