D3 Examples - TreeMap

xxxxxxxxxx
 
<!DOCTYPE html>
<meta charset="utf-8">
<link href='https://fonts.googleapis.com/css?family=Open+Sans:300' rel='stylesheet' type='text/css'>
<style>
body {
  font: 300 7px "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  position: relative;
  width: 960px;
}
.node {
  border: solid 1px grey;
  font: 300 0.8em "Arial", sans-serif;
  line-height: 7px;
  overflow: hidden;
  position: absolute;
  text-indent:0px;
}
</style>
<body>
</body>
<script src="https://d3js.org/d3.v3.min.js"></script>
<script>
var margin = {top: 0, right: 0, bottom: 0, left: 0},
    width = 1200 - margin.left - margin.right,
    height = 700 - margin.top - margin.bottom;
var color = d3.scale.category10();
var treemap = d3.layout.treemap()
    .size([width, height])
    .padding([8.5, 2, 2, 2])
    .value(function(d) { return d.degree; });
var div = d3.select("body").append("div")
    .style("position", "absolute")
    .style("width", (width + margin.left + margin.right) + "px")
    .style("height", (height + margin.top + margin.bottom) + "px")
    .style("left", margin.left + "px")
    .style("top", margin.top + "px");
  
d3.json("mdla.json",function(error, graph){
  if (error) throw error;
   var nodes= graph.nodes;
   var links= graph.links;
   var iter=function(origen){    
        for(j=0;j<links.length;j++)
          {
            var origenLink=links[j].source;
            var tipoLink=links[j].type;
            var destino=links[j].target;
            if(origenLink==origen.id){
              if(tipoLink.localeCompare("containment")==0)
              {
                if(nodes[destino]!==null&&destino>origenLink)
                            var json=iter(nodes[destino]);
               
                else if(nodes[destino]!==null&&destino<origenLink)
                  var json=nodes[destino];
                
                if(origen.children===undefined)
                            origen.children=[];
                origen.children.push(json);
                
                nodes[destino]=null;
              }
              links.splice(j,1);
              j--;
            }
          }
     return origen;
    }
   
   for(i=0;i<nodes.length;i++)
     {
       if(nodes[i]!==null)
        nodes[i]=iter(nodes[i]); 
     }
  var data={};
  data.name="flare";
  data.children=[];
  for(i=0;i<nodes.length;i++){
    if(nodes[i]!==null)
      data.children.push(nodes[i]);
  }
​
   var nodes = treemap.nodes(data);
  
  var node = div.datum(data).selectAll(".node")
      .data(treemap.nodes)
    .enter().append("div")
      .attr("class", "node")
      .call(position)
      .style("background", function(d) { return d.children ? color(d.domain) : null; })
      .text(function(d) { return d.label; });
 });
  
 function position() {
  this.style("left", function(d) { return d.x + "px"; })
      .style("top", function(d) { return d.y + "px"; })
      .style("width", function(d) { return Math.max(0, d.dx - 1) + "px"; })
      .style("height", function(d) { return Math.max(0, d.dy - 1) + "px"; });
}
</script>
    