anotherjavadude · October 25, 2011 11:37 · anotherjavadude · Oct 25, 2011
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html>
  <head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <script type="text/javascript" src="http://mbostock.github.com/d3/d3.js?1.27.2"></script>
    <script type="text/javascript" src="http://mbostock.github.com/d3/d3.layout.js?1.27.2"></script>
 <style>

 .link {
  fill: none;
  stroke: #ccc;
  stroke-width: 4.5px;
 }
 </style>

  </head>
  <body>

    <div id="viz"></div>

    <script type="text/javascript">

      var treeData = {"name" : "A", "children" : [
 {"name" : "A1" },
 {"name" : "A2" },
 {"name" : "A3", "children": [
 {"name" : "A31", "children" :[
 {"name" : "A311" },
 {"name" : "A312" }
 ]}] }
      ]};

      var vis = d3.select("#viz").append("svg:svg")
 .attr("width", 400)
 .attr("height", 300)
 .append("svg:g")
 .attr("transform", "translate(40, 0)");

      var tree = d3.layout.tree()
 .size([300,150]);

      var diagonal = d3.svg.diagonal()
 .projection(function(d) { return [d.y, d.x]; });

      var nodes = tree.nodes(treeData);
      var link = vis.selectAll("pathlink")
 .data(tree.links(nodes))
 .enter().append("svg:path")
 .attr("class", "link")
 .attr("d", diagonal);

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

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

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

    </script>
  </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
	<script type="text/javascript" src="http://mbostock.github.com/d3/d3.js?1.27.2"></script>
	<script type="text/javascript" src="http://mbostock.github.com/d3/d3.layout.js?1.27.2"></script>
	<style>

	.link {
	fill: none;
	stroke: #ccc;
	stroke-width: 4.5px;
	}
	</style>

	</head>
	<body>

	<div id="viz"></div>

	<script type="text/javascript">

	var treeData = {"name" : "A", "children" : [
	{"name" : "A1" },
	{"name" : "A2" },
	{"name" : "A3", "children": [
	{"name" : "A31", "children" :[
	{"name" : "A311" },
	{"name" : "A312" }
	]}] }
	]};

	var vis = d3.select("#viz").append("svg:svg")
	.attr("width", 400)
	.attr("height", 300)
	.append("svg:g")
	.attr("transform", "translate(40, 0)");

	var tree = d3.layout.tree()
	.size([300,150]);

	var diagonal = d3.svg.diagonal()
	.projection(function(d) { return [d.y, d.x]; });

	var nodes = tree.nodes(treeData);
	var link = vis.selectAll("pathlink")
	.data(tree.links(nodes))
	.enter().append("svg:path")
	.attr("class", "link")
	.attr("d", diagonal);

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

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

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

	</script>
	</body>
	</html>