D3 Examples - d3.layout.partition workaround

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <style>
    body {
      width: 960px;
    }
    path {
      stroke: white;
      fill-rule: evenodd;
    }
  </style>
  <script src="https://d3js.org/d3.v3.min.js"></script>
  <script src="//cdn.jsdelivr.net/lodash/2.4.1/lodash.min.js"></script>  
</head>
<body>
  <div id='viz'></div>
  <div>
    <button onclick="larger()">Larger</button><button onclick="smaller()">Smaller</button>
  </div>
  <script>
    var charts = [];
​
    d3.json("flare.json", function(error, root) {
    
      var countAccessorFn = function(d) { return 1; };
      var sizeAccessorFn = function(d) { return d.size; };
​
      charts.push(makeSunburst(_.cloneDeep(root), countAccessorFn));
      charts.push(makeSunburst(_.cloneDeep(root), sizeAccessorFn));
​
      function makeSunburst(dataRoot, valueAccessor) {
​
        var width = 480, height = 480;
        var radius = (Math.min(width, height) / 2) - 60;
        var color = d3.scale.category20c();
        var angleScale = d3.scale.linear().range([0, 2 * Math.PI]);
        var ringRadiusScale = d3.scale.linear().range([0, radius]);
​
        var svg = d3.select("#viz").append("svg")
            .attr({width: width, height: height});
        
        var container = svg.append("g")
            .attr("transform", "translate(" + width / 2 + "," + height * .52 + ")");
​
        var partition = d3.layout.partition().sort(null).value(valueAccessor);
        var nodes = partition.nodes(dataRoot);
​
        var arc = d3.svg.arc()
          .startAngle(function(d) { return Math.max(0, Math.min(2 * Math.PI, angleScale(d.x))); })
          .endAngle(function(d) { return Math.max(0, Math.min(2 * Math.PI, angleScale(d.x + d.dx))); })
          .innerRadius(function(d) { return Math.max(0, ringRadiusScale(d.y)); })
          .outerRadius(function(d) { return Math.max(0, ringRadiusScale(d.y + d.dy)); });
​
        var path = container.selectAll("path")
            .data(nodes)
          .enter().append("path")
            .attr("display", function(d) { return d.depth ? null : "none"; }) // hide inner ring
            .attr("d", arc)
            .style("fill", function(d) { return color((d.children ? d : d.parent).name); });
​
        return {
          addToRadius: function(radiusChange) {
            radius += radiusChange;
            ringRadiusScale.range([0, radius]);
            // leave all data the same but redraw arcs based on new radius
            path.transition().attr('d', arc);
          }
        }
      }
​
      d3.select(self.frameElement).style("height", "600px");
    });
​
​
    function larger() {
      charts.forEach(function(chart) {
        chart.addToRadius(20);
      });
    }
​
    function smaller() {
      charts.forEach(function(chart) {
        chart.addToRadius(-20);
      });
    }
  </script>
</body>
</html>
    