diff options
| author | Kedar Aitawdekar <kedar2a@gmail.com> | 2015-07-06 18:00:58 +0530 |
|---|---|---|
| committer | Kedar Aitawdekar <kedar2a@gmail.com> | 2015-07-06 18:00:58 +0530 |
| commit | 899a10519a8153d5c03f9d88a570b83e68a7a87e (patch) | |
| tree | f6c6708ce80930aa540119c32f450ace91948409 /gnowsys-ndf/gnowsys_ndf | |
| parent | ba1224791a1183fcf912863f997a4a9de265dafa (diff) | |
| download | gnowsys-899a10519a8153d5c03f9d88a570b83e68a7a87e.tar.gz | |
styling of collapsible graph through d3 code only
Diffstat (limited to 'gnowsys-ndf/gnowsys_ndf')
| -rw-r--r-- | gnowsys-ndf/gnowsys_ndf/ndf/templates/ndf/theme_drag_zoom_d3tree.html | 49 |
1 files changed, 33 insertions, 16 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 a62f331..0e7186f 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 @@ -436,6 +436,7 @@ return "translate(" + source.y0 + "," + source.x0 + ")"; }) .attr("data-coll-node-id", function(d) {return d.id || (d.id = ++i); }) + .style("cursor", "pointer") .on('click', click); nodeEnter.append("circle") @@ -443,7 +444,9 @@ .attr("r", 0) .style("fill", function(d) { return d._children ? "lightsteelblue" : "#fff"; - }); + }) + .style("stroke-width", "1.5px") + .style("stroke", "steelblue"); nodeEnter.append("text") .attr("x", function(d) { @@ -457,21 +460,23 @@ .text(function(d) { return d.name; }) - .style("fill-opacity", 0); + .style("fill-opacity", 0) + .style("font-family", "sans-serif") + .style("font-size", "10px"); // phantom node to give us mouseover in a radius around it - nodeEnter.append("circle") - .attr('class', 'ghostCircle') - .attr("r", 30) - .attr("opacity", 0.2) // change this to zero to hide the target area - .style("fill", "red") - .attr('pointer-events', 'mouseover') - .on("mouseover", function(node) { - overCircle(node); - }) - .on("mouseout", function(node) { - outCircle(node); - }); + // nodeEnter.append("circle") + // .attr('class', 'ghostCircle') + // .attr("r", 30) + // .attr("opacity", 0.2) // change this to zero to hide the target area + // // .style("fill", "red") + // .attr('pointer-events', 'mouseover') + // .on("mouseover", function(node) { + // overCircle(node); + // }) + // .on("mouseout", function(node) { + // outCircle(node); + // }); // Update the text to reflect whether node has children or not. node.select('text') @@ -535,7 +540,10 @@ source: o, target: o }); - }); + }) + .style("stroke", "#ccc") + .style("stroke-width", "1.5px") + .style("fill", "none"); // Transition links to their new position. link.transition() @@ -636,6 +644,15 @@ // } - // expandHierarchy(selectedNodeData[0]); + // expandHierarchy(selectedNodeData[0]); + + function downloadCollapsibleGraph(filename) + { + var blob = new Blob([$("#theme-drag-zoom-tree").html()], {type: "image/svg+xml"}); + filename = filename.replace(/\ /g, '_'); + filename += "_collapsible_Graph.svg"; + saveAs(blob, filename); + } + </script> |