My Tree Test

_.md

[ Launch: Tributary inlet ] 8553240 by ljbrown238

config.json

{"description":"My Tree Test","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"simple.json":{"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},"simple":{"default":true,"vim":false,"emacs":false,"fontSize":12},"style.css":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"fullscreen":false,"play":false,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"pingpong","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"thumbnail":"http://i.imgur.com/9af0veH.gif"}

inlet.js

// Mostly code borrowed from elsewhere
// Just hacking it up to better understand tree layouts

// For local development
//var tributary = {sw:300, sh:300};

var margin = {top: 24, right: 23, bottom: 20, left: 54};
var width = tributary.sw - margin.right - margin.left;
var height = tributary.sh - margin.top - margin.bottom;

var depth_width = 91;
var height_factor = 1.0368
var node_radius = 4.5;

var i = 0;
var duration = 68;
var root;


// This is the function that will be used in this tree to determine the sorting order
function comparator(a,b) {
	  return b.size < a.size;
}


var tree = d3.layout.tree()
	.sort(comparator)
	.size([tributary.sh, tributary.sw]);


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


// For tributary.io
var flare = tributary.simple;


// For tributary.io
var svg = d3.select("svg")

// For Local development
//var svg = d3.select("body")
//	.append("svg")
//		.attr("width", width + margin.right + margin.left)
//		.attr("height", height + margin.top + margin.bottom)

	.append("g")
		.attr("transform", "translate(" + margin.left + "," + margin.top + ")");

// For local development
//d3.json("simple.json", function(error, flare) {

root = flare;
root.x0 = height / 2;
root.y0 = 0;
	

function collapse(d) {
  if (d.children) {
    d._children = d.children;
    d._children.forEach(collapse);
    d.children = null;
  }
}

root.children.forEach(collapse);
update(root);

// For local development
//});


function comparator(a, b) {
	  return b.size - a.size;
}

function update(source) {
  
	// Compute the new tree layout.
	var nodes = tree.nodes(root).reverse();
	var links = tree.links(nodes);
	
	
	// Normalize for fixed-depth.
    // This is how close the columns of nodes will be to each other
	nodes.forEach(function(d) { d.y = d.depth * depth_width; });
	

  
	// Update the nodes…
	var node = svg.selectAll("g.node")
	  .data(nodes, function(d) { 
        return d.id || (d.id = ++i); 
      });

  
	// Enter any new nodes at the parent's previous position.
	var nodeEnter = node.enter().append("g")
	  .attr("class", "node")
	  .attr("transform", function(d) { return "translate(" + source.y0 + "," + source.x0 + ")"; })
	  .on("click", click);
	
	nodeEnter.append("circle")
	  .attr("r", 5)
	  .style("fill", function(d) { return d._children ? "lightsteelblue" : "#fff"; });
	
	nodeEnter.append("text")
	  .attr("x", function(d) { return d.children || d._children ? -10 : 10; })
	  .attr("dy", ".35em")
	  .attr("text-anchor", function(d) { return d.children || d._children ? "end" : "start"; })
	  .text(function(d) { return d.name; })
	  .style("fill-opacity", 1);
	
	// Transition nodes to their new position.
	var nodeUpdate = node.transition()
	  .duration(duration)
	  .attr("transform", function(d) { return "translate(" + d.y + "," + d.x/height_factor + ")"; });
	
	nodeUpdate.select("circle")
	  .attr("r", node_radius)
	  .style("fill", function(d) { return d._children ? "lightsteelblue" : "#fff"; });
	
	nodeUpdate.select("text")
	  .style("fill-opacity", 1);
	
	// Transition exiting nodes to the parent's new position.
	var nodeExit = node.exit().transition()
	  .duration(duration)
	  .attr("transform", function(d) { return "translate(" + source.y + "," + source.x + ")"; })
	  .remove();
	
	nodeExit.select("circle")
	  .attr("r", node_radius);
	
	nodeExit.select("text")
	  .style("fill-opacity", 1);
	
	// Update the links…
	var link = svg.selectAll("path.link")
	  .data(links, function(d) { return d.target.id; });
	
	// Enter any new links at the parent's previous position.
	link.enter().insert("path", "g")
	  .attr("class", "link")
	  .attr("d", function(d) {
	    var o = {x: source.x0, y: source.y0};
	    return diagonal({source: o, target: o});
	  });
	
	// Transition links to their new position.
	link.transition()
	  .duration(duration)
	  .attr("d", diagonal);
	
	// Transition exiting nodes to the parent's new position.
	link.exit().transition()
	  .duration(duration)
	  .attr("d", function(d) {
	    var o = {x: source.x, y: source.y};
	    return diagonal({source: o, target: o});
	  })
	  .remove();
	
	// Stash the old positions for transition.
	nodes.forEach(function(d) {
		d.x0 = d.x;
		d.y0 = d.y;
	});
}


// Toggle children on click.
function click(d) {
  //console.log("inclick");
	if (d.children) {
		d._children = d.children;
		d.children = null;
	} else {
		d.children = d._children;
		d._children = null;
	}
	update(d);
}

simple.json

{
    "name": "size",
    "children": [
        {
            "name": "a",
            "size": "5",
            "children": [
                {
                    "name": "a1",
                    "size": "1"
                },
                {
                    "name": "a2",
                    "size": "4"
                }
             ]
        },
        {
            "name": "b",
            "size": "2",
            "children": [
                {
                    "name": "b1",
                    "size": "2"
                }
            ]
        },
        {
            "name": "c",
            "size": "3"
        }
    ]
}

style.css

.node {
  cursor: pointer;
}

.node circle {
  fill: #fff;
  stroke: steelblue;
  stroke-width: 1.5px;
}

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

.link {
  fill: none;
  stroke: #ccc;
  stroke-width: 1.5px;
}