Commit d0039d45 authored by bogdan's avatar bogdan
Browse files

tree visualization

parent f968b042
<style type="text/css"> <style type="text/css">
circle { circle {
cursor: pointer; cursor: pointer;
fill: #fff; fill: #EEEEEE;
stroke: steelblue; stroke: #F6AE38;
stroke-width: 1.5px; stroke-width: 1.5px;
} }
text { text {
font-size:10px; font-size:12px;
} }
path.link { path.link {
...@@ -28,9 +28,9 @@ ...@@ -28,9 +28,9 @@
src="https://raw.github.com/mbostock/d3/master/d3.js" src="https://raw.github.com/mbostock/d3/master/d3.js"
var m = [20, 20, 20, 20], var m = [20, 80, 20, 120],
w = 870 - m[1] - m[3], w = 870 - m[1] - m[3],
h = 570 - m[0] - m[2], h = 500 - m[0] - m[2],
i = 0, i = 0,
json; json;
...@@ -46,21 +46,13 @@ var vis = d3.select("#chart").append("svg:svg") ...@@ -46,21 +46,13 @@ var vis = d3.select("#chart").append("svg:svg")
.append("svg:g") .append("svg:g")
.attr("transform", "translate(" + m[3] + "," + m[0] + ")"); .attr("transform", "translate(" + m[3] + "," + m[0] + ")");
// var json_pre = JSON.stringify('{{json}}');
// var json_rep = json_pre.replace(/&quot;/g, '"');
// console.log (json_rep);
json = JSON.parse('{{json}}'.replace(/&quot;/g, '"')); json = JSON.parse('{{json}}'.replace(/&quot;/g, '"'));
// var json_post = json.replace(/&quot;/g, '"');
console.log (json) console.log (json)
function(json) { function(json) {
// json = json; // json = json;
json.x0 = 400; json.x0 = h/2;
json.y0 = 0; json.y0 = 0;
} }
function toggleAll(d) { function toggleAll(d) {
...@@ -88,7 +80,7 @@ function update(source) { ...@@ -88,7 +80,7 @@ function update(source) {
var nodes = tree.nodes(json).reverse(); var nodes = tree.nodes(json).reverse();
// Normalize for fixed-depth. // Normalize for fixed-depth.
nodes.forEach(function(d) { d.y = d.depth * 180; }); nodes.forEach(function(d) { d.y = d.depth * 100; });
// Update the nodes… // Update the nodes…
var node = vis.selectAll("g.node") var node = vis.selectAll("g.node")
...@@ -102,7 +94,7 @@ function update(source) { ...@@ -102,7 +94,7 @@ function update(source) {
nodeEnter.append("svg:circle") nodeEnter.append("svg:circle")
.attr("r", 1e-6) .attr("r", 1e-6)
.style("fill", function(d) { return d._children ? "lightsteelblue" : "#fff"; }); .style("fill", function(d) { return d._children ? "#F7B64C" : "#F2D5A8"; });
nodeEnter.append("svg:text") nodeEnter.append("svg:text")
.attr("x", function(d) { return d.children || d._children ? -10 : 10; }) .attr("x", function(d) { return d.children || d._children ? -10 : 10; })
...@@ -117,8 +109,8 @@ function update(source) { ...@@ -117,8 +109,8 @@ function update(source) {
.attr("transform", function(d) { return "translate(" + d.y + "," + d.x + ")"; }); .attr("transform", function(d) { return "translate(" + d.y + "," + d.x + ")"; });
nodeUpdate.select("circle") nodeUpdate.select("circle")
.attr("r", 4.5) .attr("r", 5)
.style("fill", function(d) { return d._children ? "lightsteelblue" : "#fff"; }); .style("fill", function(d) { return d._children ? "#F7B64C" : "#FFF0A5"; });
nodeUpdate.select("text") nodeUpdate.select("text")
.style("fill-opacity", 1); .style("fill-opacity", 1);
...@@ -142,13 +134,16 @@ function update(source) { ...@@ -142,13 +134,16 @@ function update(source) {
// Enter any new links at the parent's previous position. // Enter any new links at the parent's previous position.
link.enter().insert("svg:path", "g") link.enter().insert("svg:path", "g")
.attr("class", "link") .attr("class", "link")
.attr("id", function(d){
return "L" + d.target.id;
})
.attr("d", function(d) { .attr("d", function(d) {
var o = {x: source.x0, y: source.y0}; var o = {x: source.x0, y: source.y0};
return diagonal({source: o, target: o}); return diagonal({source: o, target: o});
}) })
.transition() .transition()
.duration(duration) .duration(duration)
.attr("d", diagonal); .attr("d", diagonal);
// Transition links to their new position. // Transition links to their new position.
link.transition() link.transition()
......
...@@ -210,12 +210,12 @@ def treeToJSON(node, path="", nodes={}): ...@@ -210,12 +210,12 @@ def treeToJSON(node, path="", nodes={}):
path = "['children']" #prepare path for future use, it points into 'children' property of the root node path = "['children']" #prepare path for future use, it points into 'children' property of the root node
if node.branch_selector: #if the node has branches if node.branch_selector: #if the node has branches
for n in node.branches: #walk through all the branches one by one for n in range(len(node.branches)): #walk through all the branches one by one
try: try:
if n.branch_selector: #if the node (branch) has branches if node.branches[n].branch_selector: #if the node (branch) has branches
child = { #set node properties child = { #set node properties
"name":n.branch_selector.class_var.name, "name":node.branch_descriptions[n] + " - " + node.branches[n].branch_selector.class_var.name,
"ID":n.reference(), "ID":node.branches[n].reference(),
"children":[] #stays open for future descendant nodes "children":[] #stays open for future descendant nodes
} }
...@@ -226,8 +226,8 @@ def treeToJSON(node, path="", nodes={}): ...@@ -226,8 +226,8 @@ def treeToJSON(node, path="", nodes={}):
else: #if node is a leaf else: #if node is a leaf
child = { child = {
"name":n.node_classifier.default_value.value, "name":node.branch_descriptions[n] + " - " + node.branches[n].node_classifier.default_value.value,
"ID":n.reference(), "ID":node.branches[n].reference(),
} }
eval ("nodes" + path + ".append(" + str(child) + ")") eval ("nodes" + path + ".append(" + str(child) + ")")
except: except:
...@@ -245,25 +245,8 @@ def tree_visualization(request, input_dict, output_dict, widget): ...@@ -245,25 +245,8 @@ def tree_visualization(request, input_dict, output_dict, widget):
tc = input_dict['clt'] tc = input_dict['clt']
print "viz start"
# jsonT = treeToJSON(tc.tree)
jsonJ = treeToJSON(tc.tree) jsonJ = treeToJSON(tc.tree)
print "viz end"
# jsonJ = json.dumps(jsonT, separators=(',',':'))
# jsonJ = json.JSONEncoder().encode(jsonT)
print jsonJ print jsonJ
# import tempfile
# f = tempfile.NamedTemporaryFile(delete=False,suffix='.json')
# f.write(jsonJ)
# f.close()
# print f.name
return render(request, 'visualizations/tree_visualization.html', {'widget':widget, 'input_dict':input_dict, 'json':jsonJ}) return render(request, 'visualizations/tree_visualization.html', {'widget':widget, 'input_dict':input_dict, 'json':jsonJ})
\ No newline at end of file
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment