OXIESEC PANEL

Name	Size	Modified	Perms
📁 ..	-	12/31/2022 06:53:36 AM	rwxr-xr-x
📄 bar.js	7.96 KB	08/14/2022 11:05:12 AM	rw-r--r--
📄 heatmap.js	5.87 KB	08/14/2022 11:05:12 AM	rw-r--r--
📄 makeJson.js	1.64 KB	08/14/2022 11:05:12 AM	rw-r--r--
📄 radar.js	6.48 KB	08/14/2022 11:05:12 AM	rw-r--r--
📄 stock.js	5.6 KB	08/14/2022 11:05:12 AM	rw-r--r--
📄 tree.css	1.35 KB	08/14/2022 11:05:12 AM	rw-r--r--
📄 tree.js	4.79 KB	08/14/2022 11:05:12 AM	rw-r--r--

Editing: tree.js

//function plotTreeChart(report_data, h, w){
function drawTreeChart(Data, divId, Title, Width, Height, Ndim, Nmeas, MeasFormats,dispObj,toolTip){
	Height=makeProperHeight(Height, divId);
	Width=makeProperWidth(Width, divId);
	var w = Width, h = Height; 
//	var w = d3.select("#"+divId).style("width").replace("px",""), h = d3.select("#"+divId).style("height").replace("px",""); 
	var tree = d3.layout.tree().size([h, w-200]);

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

var vis = d3.select("#"+divId).html("");
	var vis = d3.select("#"+divId).append("svg:svg")
		.attr("width", w)
		.attr("height", h)
		.append("svg:g")
		.attr("transform", "translate(60,0)");

d3.select("#"+divId).append("div")
		//.attr("id", "pop-up");
		.attr("class", "tipsy");

json=makeJsonFromArray(Data, Ndim, Nmeas, MeasFormats[0]);	
	json.x0 = 800;
	json.y0 = 0;

update(json, tree, json, vis, diagonal);

for(var i=0;i<json["children"].length;i++){
		d=json["children"][i];
		collapse(d);
	}
	update(json, tree, json, vis, diagonal);

}

function collapse(d){
	if (d.children) {
		for(var i=0;i<d.children.length;i++){
			collapse(d.children[i]);
		}
		d._children = d.children;
		d.children = null;
	}
}

function update(source, tree, root, vis, diagonal) {
	var i=0, duration = 500;
	var nodes = tree.nodes(root).reverse();
	var node = vis.selectAll("g.node")
		.data(nodes, function(d) { return d.id || (d.id = ++i); });

var nodeEnter = node.enter().append("svg:g")
		.attr("class", "node")
		.attr("transform", function(d) { return "translate(" + source.y0 + "," + source.x0 + ")"; });

nodeEnter.append("svg:circle")
		.attr("r", function(d) { return parseFloat(d.percent)<1?1:parseFloat(d.percent)/2; })
		.style("fill", function(d) { return (d._children || d.children) ? "green" : "#fff"; })
		.style("stroke", "#006600" )
		.style("stop-color", "#005C99" )
		.style("stop-opacity", "1" )
		.on("click", function(d){
				this.nextSibling.style.fill=d._children? "red" : "black";
				click(d,tree, root, vis, diagonal);
		})
		.on("mouseover",dblclick) 
		.on("mouseout",outclick)

nodeEnter.append("svg:text")
		.attr("x", function(d) { return d._children ? -8 : 8; })
		.attr("y", 2)
		.attr("x", 15)
		.on("click", function(d){
				this.style.fill=d._children? "red" : "black";
				click(d,tree, root, vis, diagonal);
		})
		.text(function(d) { return String(d.name).replace("&amp;", "&")+" ("+d.percent+")"; });

// Transition nodes to their new position.
	nodeEnter.transition()
		.duration(duration)
		.attr("transform", function(d) { return "translate(" + d.y + "," + d.x + ")"; })
		.select("circle")
		.style("stroke", "#008800" )
		.style("stroke-width", "5" )
		.style("stroke-opacity", "0.4" )
		.style("fill", function(d) { return (d.children || d._children) ? "#44AA44" : "#fff"; });

node.transition()
		.duration(duration)
		.attr("transform", function(d) { return "translate(" + d.y + "," + d.x + ")"; })
		.style("opacity", 1);

node.exit().transition()
		.duration(duration)
		.attr("transform", function(d) { return "translate(" + source.y + "," + source.x + ")"; })
		.style("opacity", 1e-6)
		.remove();

// Update the links…
	var link = vis.selectAll("path.link")
		.data(tree.links(nodes), function(d) { return d.target.id; });

// Enter any new links at the parent's previous position.
	link.enter().insert("svg:path", "g")
		.attr("class", "link")
		.attr("d", function(d) {
				var o = {x: source.x0, y: source.y0};
				return diagonal({source: o, target: o});
				})
	.transition()
		.duration(duration)
		.attr("d", diagonal);

// 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, tree, root, vis, diagonal) {
	if (d.children) {
		d._children = d.children;
		d.children = null;
	} else {
		d.children = d._children;
		d._children = null;
	}
	update(d, tree, root, vis, diagonal);
}

function outclick(d) {
	$(this).parent().parent().parent().next().fadeOut(10);
}

//plotTreeChart(report_data, "chart", "Title", 500, 500);