Untitled

<!doctype html>
<html lang="en">

  <head>
  <style>
.node circle {
 fill: #fff;
 stroke: steelblue;
 stroke-width: 1.5px;
}
.node {
 font: 10px sans-serif;
}
.link {
 fill: none;
 stroke: #ccc;
 stroke-width: 1.5px;
}
 </style>
    <script src="https://d3js.org/d3.v3.min.js"></script>
  </head>
  <body>
  <script>

  var width = 500;
  var height = 500;

  var cluster = d3.layout.cluster()
 .size([height, width - 160]);
var diagonal = d3.svg.diagonal()
 .projection(function(d) { return [d.y, d.x]; });


  var data = {
              "name": "flare",
              "children": [{
                "name": "analytics",
                "children": [{
                  "name": "cluster",
                  "children": [{
                    "name": "AgglomerativeCluster",
                    "size": 3938
                  }, {
                    "name": "CommunityStructure",
                    "size": 3812
                  }, {
                    "name": "MergeEdge",
                    "size": 743
                  }]
                }, {
                  "name": "graph",
                  "children": [{
                    "name": "BetweennessCentrality",
                    "size": 3534
                  }, {
                    "name": "LinkDistance",
                    "size": 5731
                  }]
                }]
              }]
          };


function draw()
{
  var svg = d3.select("body").append("svg")
 .attr("width", width)
 .attr("height", height)
 .append("g")
 .attr("transform", "translate(40,0)");

var nodes = cluster.nodes(data),
 links = cluster.links(nodes);

 var link = svg.selectAll(".link")
 .data(links)
 .enter().append("path")
 .attr("class", "link")
 .attr("d", diagonal);

var node = svg.selectAll(".node")
 .data(nodes)
 .enter().append("g")
 .attr("class", "node")
 .attr("transform", function(d) { return "translate(" + d.y + "," +d.x + ")"; })

 node.append("circle")
 .attr("r", 4.5);

node.on("click", function(d){collapse(d);});

node.append("text")
 .attr("dx", function(d) { return d.children ? -8 : 8; })
 .attr("dy", 3)
 .style("text-anchor", function(d) { return d.children ? "end" :"start"; })
 .text(function(d) { return d.name; });

}

  function collapse(d) {
  if (d.children) {
    d._children = d.children;
    d.children = null;
  }
  else {
    d.children = d._children;
    d._children = null;
  }
  d3.select("svg").remove();
  draw(d);
}
draw();

</script>
  </body>