lindep/README.md

## README.md

      
    Raw
  

              README.md
            
          
    Built with blockbuilder.org
forked from lindep's block: treemap_hierarchy

  
## index.html
<!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>
	<!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>