diff options
author | Kedar Aitawdekar <kedar2a@gmail.com> | 2015-07-03 22:26:45 +0530 |
---|---|---|
committer | Kedar Aitawdekar <kedar2a@gmail.com> | 2015-07-03 22:26:45 +0530 |
commit | 6e82c6f0e8386aabd8e0c07b7e6b64e6235212a2 (patch) | |
tree | e68390747a3a794a7772e86738a5b9a245fab938 | |
parent | 1a3520a44ca51cc094fba706836586ce1f6df883 (diff) | |
download | gnowsys-6e82c6f0e8386aabd8e0c07b7e6b64e6235212a2.tar.gz |
Enabling click redirection to topic detail view for drag-zoom-collapsible-tree
-rw-r--r-- | gnowsys-ndf/gnowsys_ndf/ndf/templates/ndf/theme_drag_zoom_d3tree.html | 152 |
1 files changed, 126 insertions, 26 deletions
diff --git a/gnowsys-ndf/gnowsys_ndf/ndf/templates/ndf/theme_drag_zoom_d3tree.html b/gnowsys-ndf/gnowsys_ndf/ndf/templates/ndf/theme_drag_zoom_d3tree.html index 847bb78b..a62f3318 100644 --- a/gnowsys-ndf/gnowsys_ndf/ndf/templates/ndf/theme_drag_zoom_d3tree.html +++ b/gnowsys-ndf/gnowsys_ndf/ndf/templates/ndf/theme_drag_zoom_d3tree.html @@ -1,23 +1,8 @@ -<div id="theme-drag-zoom-container" class="hide"> - - <a href="#" data-reveal-id="theme-drag-zoom-tree">Show graph with zoom and drag functionality</a> - - <div id="theme-drag-zoom-tree" class="reveal-modal xlarge" data-reveal> - <a class="close-reveal-modal">×</a> - </div> - -</div> - <script type="text/javascript"> - - // treeData = "" - // $.getJSON("{% url 'get_tree_hierarchy' group_id node.pk %}?collapsible=true", function(data){ treeData = data;}); - - // d3.json("{% url 'get_tree_hierarchy' group_id node.pk %}?collapsible=true", function(error, treeData) { function plotDragZoomTree(treeData) { - $("#theme-drag-zoom-tree").html(""); + // $("#theme-drag-zoom-tree").html(""); // Calculate total nodes, max label length var totalNodes = 0; @@ -38,7 +23,7 @@ // size of the diagram var viewerHeight = $(window).height() * 0.80; - var viewerWidth = $(document).width() * 0.90; + var viewerWidth = $(document).width() * 0.80; var tree = d3.layout.tree() @@ -277,6 +262,25 @@ d._children = null; } } + + function getHierarchyIds(d) { + hierarchyIdsArr = [d.id]; + + while(d.parent) + { + hierarchyIdsArr.push(d.parent.id); + d = d.parent; + } + // currently treeData doesn't hold top-theme _id, + // so by default it's 1 in that place. Replace 1 with top theme's _id: + hierarchyIdsArr.pop(hierarchyIdsArr.indexOf(1)); + // hierarchyIdsArr.push("{{node.pk}}"); + + hierarchyIdsArr.reverse(); + // console.log(hierarchyIdsArr) + + return hierarchyIdsArr + } var overCircle = function(d) { selectedNode = d; @@ -322,7 +326,7 @@ scale = zoomListener.scale(); x = -source.y0; y = -source.x0; - x = x * scale + viewerWidth / 2; + x = x * scale + viewerWidth / 4; y = y * scale + viewerHeight / 2; d3.select('#theme-drag-zoom-tree g').transition() .duration(duration) @@ -344,13 +348,47 @@ } // Toggle children on click. - - function click(d) { - if (d3.event.defaultPrevented) return; // click suppressed - d = toggleChildren(d); - update(d); - centerNode(d); - } + + // Toggle children on click. + function click(d) { + if (d.children) { + d._children = d.children; + d.children = null; + console.log("non-leaf 1"); + } + else { + if(d._children){ + d.children = d._children; + d._children = null; + console.log("non-leaf 2"); + } + else if (d.node_type == "Topic"){ + console.log("Leaf!"); + + hierarchyIdsArr = getHierarchyIds(d); + + // alert("dddddd"); + // var a = document.createElement('a'); + // a.setAttribute('href', "/{{group_name_tag}}/topic_details/"+d.id+""); + // // a.setAttribute('target', '_blank'); + // document.body.appendChild(a); + // a.click(); + // a.remove(); + location.href = "/{{group_name_tag}}/topic_details/" + d.id + + "?nav_li=" + hierarchyIdsArr.toString() + ""; + // location.href = "/{{group_name_tag}}/topic_details/"+d.id+""; + // $('#collaps_topic_details').foundation('reveal', 'open'); + } + } + update(d); + } + + // function click(d) { + // if (d3.event.defaultPrevented) return; // click suppressed + // d = toggleChildren(d); + // update(d); + // centerNode(d); + // } function update(source) { // Compute the new height, function counts total children of root node and sets tree height accordingly. @@ -397,8 +435,9 @@ .attr("transform", function(d) { return "translate(" + source.y0 + "," + source.x0 + ")"; }) + .attr("data-coll-node-id", function(d) {return d.id || (d.id = ++i); }) .on('click', click); - + nodeEnter.append("circle") .attr('class', 'nodeCircle') .attr("r", 0) @@ -530,12 +569,73 @@ // Define the root root = treeData; + aaa = root; root.x0 = viewerHeight / 2; root.y0 = 0; // Layout the tree initially and center on the root node. + // getData(root); root.children.forEach(collapse); update(root); centerNode(root); + + // recursive function needed to get data for {{selected}} node + // result = "" + // function getData (d) { + + // console.log("{{selected}} : " + d.name + " : " + d.id); + // if(d.id == "{{selected}}") + // { + // console.log("======================================================"); + // result = d + // } + + // if(d.children) + // { + // console.log(d.children) + // d.children.forEach(function(i){ + // res = getData(i); + // if (res) + // { + // return res + // } + // }) + // } + // else if(d._children) + // { + // console.log(d._children) + // d._children.forEach(function(i){ + // res = getData(i); + // if (res) + // { + // return res + // } + // }) + // } + // } + // console.log(getData(root)) } +// alert("{{selected}}"); +//called with every property and it's value + + + // selected = document.querySelector('[data-coll-node-id="{{selected}}"]'); + // selectedNodeData = d3.select(selected).data(); + // d = selectedNodeData[0]; + // hierarchyIdsArr = getHierarchyIds(d); + // console.log(hierarchyIdsArr); + + // while(d && d.parent) + // { + // console.log("11") + // click(d) + // d = d.parent; + // } + // function expandHierarchy(d) { + // console.log(d) + + // } + + // expandHierarchy(selectedNodeData[0]); + </script> |