Simple tree example

_.md

[ Launch: Simple tree example ] 5147500 by gelicia

config.json

{"description":"Simple tree example","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"fullscreen":false,"play":false,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"period","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01}

inlet.js

//from http://javadude.wordpress.com/2011/10/27/d3-js-tree-most-simple-sample/

//JSON object with the data
var treeData = [
  {"name":"portal", "calcCount":308335,
     "classes": [{"name": "PortalOutline", "fullCall": "portal.PortalOutline", "useCount": 308335, "calcCount" : 308335}]
	},
  {"name":"user", "calcCount": 161884,
     "classes": [{"name": "Outline", "calcCount":161884,
				 "methods": [{"name" : "getNavigation", "fullCall":"user.Outline-getNavigation", "useCount": 161884}]
				}
			   ]
	},
  {"name":"core", "calcCount": 290654,
	"classes": [
      {"name": "Person", "fullCall": "core.Person", "useCount": 154556, "calcCount" : 157957,
			"methods" : [{"name": "load", "fullCall" : "core.Person-load" , "useCount": 3303 },
				{"name": "hideBirthDates", "fullCall" : "core.Person-hideBirthDates" , "useCount": 80 },
				{"name": "delete", "fullCall" : "core.Person-delete" , "useCount": 18 }
			]
		},
		{"name": "PersonHeader", "fullCall": "core.PersonHeader", "useCount": 132697}
		]
	}
];

var vis = d3.select("svg")
	.attr({
      width: 1857,
      height: 1245
    })
	.append("svg:g")
	.attr("transform", "translate(40, 0)"); 

var lineScale = d3.scale.linear()
    .domain([0, 308335])
    .range([1, 10]);

var tree = d3.layout.tree()
    .size([436,217])
	.children(function(d){ return d.classes || d.methods || d ;}); 

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

var nodes = tree.nodes(treeData);
var links = tree.links(nodes);


var link = vis.selectAll("pathlink")
	.data(links)
	.enter()
	.append("svg:path")
	.attr({
      "class":"link",
      "d": diagonal,
      "fill" : "none",
      "stroke-width": function(d, i){ console.log(d); return lineScale(d.target.calcCount ? d.target.calcCount : d.target.useCount);},
      "stroke": "#ccc"
    });

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

// Add the dot at every node
node.append("svg:circle")
.attr("r", 6.5)
.attr("title", function(d){return d.useCount;});

// place the name atribute left or right depending if children
node.append("svg:text")
.attr("dx", function(d) { return d.children ? 20 : 10; })
.attr("dy", function(d) { return d.children ? -8 : 6; })
.attr("text-anchor", function(d) { return d.children ? "end" : "start"; })
.text(function(d) { return d.name ; })
.attr("title", function(d){return d.useCount;})