treemap_stratify

forked from lindep's block: treemap_hierarchy

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="//d3js.org/d3.v4.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
    
    .node circle {
  fill: #999;
}

.node text {
  font: 10px sans-serif;
}

.node--internal circle {
  fill: #555;
}

.node--internal text {
  text-shadow: 0 1px 0 #fff, 0 -1px 0 #fff, 1px 0 0 #fff, -1px 0 0 #fff;
}

.link {
  fill: none;
  stroke: #555;
  stroke-opacity: 0.4;
  stroke-width: 1.5px;
}

</style>
</head>

<body>
  <svg width="450" height="208"></svg>
  <script>
    var treeArray = [
      {name:"007-112",parent:""},
      {name:"007-107",parent:"007-112"},
      {name:"007-102",parent:"007-112"},
      {name:"007-072",parent:"007-102"}
    ];
    var arrayNodes = d3.stratify()
    .id(function(d) { return d.name; })
    .parentId(function(d) { return d.parent; })
    (treeArray);
    
    console.log(arrayNodes)
    
    
 
    var svg = d3.select("body").select("svg"),
    width = +svg.attr("width"),
    height = +svg.attr("height"),
    g = svg.append("g").attr("transform", "translate(100,0)"),
    area = g.append("rect");
    
    var treemap = d3.tree()
    .size([height, width - 237]);

nodes = treemap(arrayNodes);
    
    var link = g.selectAll(".link")
      .data( nodes.descendants().slice(1))
    	.enter().append("path")
      .attr("class", "link")
      .attr("d", function(d) {
        return "M" + d.y + "," + d.x
            + "C" + (d.y + d.parent.y) / 2 + "," + d.x
            + " " + (d.y + d.parent.y) / 2 + "," + d.parent.x
            + " " + d.parent.y + "," + d.parent.x;
      });

var node = g.selectAll(".node")
      .data(nodes.descendants())
    .enter().append("g")
      .attr("class", function(d) { return "node" + (d.children ? " node--internal" : " node--leaf"); })
      .attr("transform", function(d) { return "translate(" + d.y + "," + d.x + ")"; });
    
    node.append("circle")
      .attr("r", 2.5);

node.append("text")
      .attr("dy", 3)
      .attr("x", function(d) { return d.children ? -8 : 8; })
      .style("text-anchor", function(d) { return d.children ? "end" : "start"; })
      .text(function(d) { return d.data.name; });
    
    console.log("you are now rocking with d3", width,height);
  </script>
</body>

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