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("graph.json",function(error, data){
  if (error) throw error;
  var graph={};
  graph.name='nodes';
  graph.data=data;
  console.log(graph);
   var nodes = treemap.nodes(graph);
  
  var node = div.datum(graph).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>
​
    