gistfile1.txt

build: function(tree_data)
		{	
			var margin     = { top: 40, right: 120, bottom: 20, left: 120 },
				raw_width  = 960,
				raw_height = 500,
				width      = raw_width - margin.right - margin.left,
				height     = raw_height - margin.top - margin.bottom,
				box_width  = 250,
				box_height = 50;

			var i = 0,
				duration = 750,
				root;

			/*
			
			*/
			var tree = d3.layout.tree()
				.separation(function separation(a, b) 
				{
				 	return a.parent == b.parent ? 5 : 5;
				})
				.nodeSize([35, 60]);
				
				
			/*
			
			*/	
			var diagonal = d3.svg.diagonal()
				.projection(function(d) { return [d.x, d.y]; });
			
			/*
			
			*/	
			var separation = tree;

			var zoom = d3.behavior.zoom()
			    .scaleExtent([1, 1])
			    .on("zoom", redraw);
			
			/*
			
			*/
			var svg = d3.select("#captivate_graph").append("svg")
				.attr("width", width + margin.right + margin.left)
				.attr("height", height + margin.top + margin.bottom)
				.call(zm = zoom)
			  	.append("g")
				.attr("transform", "translate(" + (raw_width / 4) + "," + margin.top + ")");
			
			/*
				Specifies where to pan from
			*/
			zm.translate([(raw_width / 4), margin.top]);	
				
			// 
			root    = tree_data[0];
			root.x0 = raw_width / 4 ;
			root.y0 = 0;
			
			
			// 
			update(root);
			// 
			function update(source) 
			{
			  	// Compute the new tree layout.
			  	var nodes = tree.nodes(root).reverse(),
				  	links = tree.links(nodes);

			  	// Normalize for fixed-depth.
			  	nodes.forEach(function(d) { d.y = d.depth * 100; });

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

			  	// Enter the nodes.
			  	var nodeEnter = node.enter().append("g")
				  	.attr("class", "node")
					.attr("id", function(d,i)
					{
						return d.id 
					})
				  	.attr("transform", function(d) { return "translate(" + source.x0 + "," + source.y0 + ")"; })
					.on("click", click);
					
				//
			  	nodeEnter.append("circle")
				.attr("r", function(d)
				{
					if( d.type == 'blank' )
						return 10;
					else
						return 20;
				})
				.style("stroke-width", 4)
				.style("stroke", "#23222b")
				.style("fill", function(d) 
				{ 
					if( d.type == 'root' )
						return '#23222b';
					else
						return '#FFF';
				})
				.style("display", function(d) { return d.type == 'blank' || d.type == 'root' ? null :'none'; });
				
					
				bbox = {
					width: box_width,
					height: box_height,
					x: 0,
					y: 0
				}
					
				nodeEnter.append("rect")
					.attr("x", bbox.x - bbox.width / 2 )
					.attr("y", bbox.y - bbox.height / 2)
					.attr("width", bbox.width)
					.attr("height", bbox.height)
					.style("fill", "#23222b")
					.style("stroke", "#23222b")
					.style("stroke-width", "0")
					.style("display", function(d) { return d.type == 'blank' || d.type == 'root' ? "none" : null; });
						
			
				
			  	nodeEnter.append("text")
					.attr("y", function(d) { 
						return d.children || d._children ? 0 : 0; })
					.attr("dy", "3px")
					.attr("text-anchor", "middle")
					.text(function(d)
					{ 
						if( d.type == 'blank' ){
							return '+';
						}else if( d.type == 'equation' ){
							var key = d.data[0].key;
							// TODO in future put this in loop if data array can accept more than one element
							if( ! entity.equation.is_custom(key) ){
								var result = $.grep( entity.data.get('filter_list'), function(e){ 
									return e.method == d.data[0].key; 
								});
							}else{
								var result = [{label: d.data[0].key}];
							}
							return result[0].label + ' ' + entity.equation.translate_comparison(d.data[0].comparison) + ' ' + d.data[0].value;
						}else{
							return '';
						}
					})
					.style("fill", function(d,i)
					{
						if( d.type == 'equation' )
							return '#FFF';
						else
							return '#23222b';		
					});
					
				
				// Transition nodes to their new position.
				
				var nodeUpdate = node.transition()
					.duration(duration)
				 	.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });


				// Transition exiting nodes to the parent's new position.
				var nodeExit = node.exit().transition()
					.duration(duration)
					.attr("transform", function(d) { return "translate(" + source.x + "," + source.y + ")"; })
					.remove();

				
				nodeExit.select("circle")
					.attr("r", 1e-6)
				 	.style("stroke", "#23222b")
					.style("stroke-width", 4);

				nodeExit.select("text")
					.style("fill-opacity", 1e-6);
				
				
				

			  	// Declare 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;
				});
				

			}