Built with blockbuilder.org
xxxxxxxxxx<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