circlepacking test

Built with blockbuilder.org

<!DOCTYPE html>
<meta charset="utf-8"> 
<style>

circle {
  fill: rgb(31, 119, 180);
  fill-opacity: .25;
  stroke: rgb(31, 119, 180);
  stroke-width: 1px;
}

.leaf circle {
  fill: #ff7f0e;
  fill-opacity: 1;
}

text {
  font: 10px sans-serif;
  text-anchor: middle;
}

</style>
<svg width="500" height="400"></svg>
<script src="https://d3js.org/d3.v4.js"></script>
<script>

var treeData = {
    "name": "1",
    "children": [ 
    {"name": "11", "children": [ 
    {"name": "111", "size": 1},
    {"name": "112", "size": 1},
    {"name": "113", "size": 1},
    {"name": "114", "children": [
    {"name": "1141", "size": 1},
    {"name": "1142", "size": 1}]
    }]
    },
    {"name": "12", "children": [
    {"name": "121", "children": [
    {"name": "1211", "size": 1},
    {"name": "1212", "size": 1}]
    },
    {"name": "122", "size": 1}]
    }]
}
;
  
var svg = d3.select("svg"),
    diameter = +svg.attr("height"),
    g = svg.append("g"),
    format = d3.format(",d");

var pack = d3.pack()
    .size([diameter, diameter]);

/*d3.json("flare.json", function(error, root) {
  if (error) throw error;*/

root = d3.hierarchy(treeData)
      .sum(function(d) { return d.children?0:1; });
      //.sort(function(a, b) { return b.value - a.value; });

var node = g.selectAll(".node")
    .data(pack(root).descendants())
    .enter().append("g")
      .attr("class", function(d) { return d.children ? "node" : "leaf node"; })
      .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });

node.append("title")
      .text(function(d) { return d.data.name + "\n" + format(d.value); });

node.append("circle")
      .attr("r", function(d) { return d.r; });

node.filter(function(d) { return !d.children; }).append("text")
      .attr("dy", "0.3em")
      .text(function(d) { return d.data.name.substring(0, d.r / 3); });
//});

</script>

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