d3.js v4 pack layout with pie chart

D3.js pack layout with pie charts instead of circles, updated to d3v4

In response to: http://stackoverflow.com/questions/26830386/how-to-insert-pie-charts-in-pack-layout-in-d3-js

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body {
      font-family: sans-serif;
      margin:0;position:fixed;top:0;right:0;bottom:0;left:0;
    }
    g.arc path {
      stroke: #828282;
      stroke-width: 0.5;
    }
    g.arc text {
      font-size: 10px;
    }
  </style>
</head>

var data = [
  ["bubble1", [10, 20]],
  ["bubble2", [5, 7]],
  ["bubble3", [6, 6, 10]],
  ["bubble4", [12, 14]],
  ["bubble5", [14, 4]],
  ["bubble6", [15, 5, 10]],
  ["bubble7", [10, 10]],
  ["bubble8", [25, 10]],
  ["bubble9", [10, 25, 10, 10]],
  ["bubble10", [55, 10]],
  ["bubble11", [10, 80, 10, 10]],
  ["bubble12", [50, 50]],
];

var color = d3.scaleOrdinal().range(["#f1eef6","#bdc9e1","#74a9cf","#0570b0"]),
    diameter = 500;

var bubble = d3.pack()
      .size([diameter, diameter])
      .padding(1.5),
    root = d3.hierarchy({children: data})
     	.sum(function(d) { return d.children ? 0 : d3.sum(d[1]); }),
    arc = d3.arc().innerRadius(0),
    pie = d3.pie();

var nodeData = bubble(root).children;

var svg = d3.select("body").append("svg")
    .attr("width", diameter)
    .attr("height", diameter)
    .attr("class", "bubble");

arcEnter.append("path")
    .attr("d", function(d) {
      arc.outerRadius(d.r);
      return arc(d);
    })
    .style("fill", function(d, i) { return color(i); });

arcEnter.append("text")
    .attr('x', function(d) { arc.outerRadius(d.r); return arc.centroid(d)[0]; })
		.attr('y', function(d) { arc.outerRadius(d.r); return arc.centroid(d)[1]; })
    .attr('dy', "0.35em")
    .style("text-anchor", "middle")
    .text(function(d) { console.log(d); return d.value; });

var labels = nodeEnter.selectAll("text.label")
    .data(function(d) { return [d.data[0]]; });
labels.enter().append("text")
		.attr('class', 'label')
		.attr('dy', '0.35em')
    .style("text-anchor", "middle")
    .text(String);
    
  </script>
</body>

https://d3js.org/d3.v4.min.js