[1484] | 1 | |
---|
| 2 | <div id="d3viz" style="clear: both; border : solid;"></div> |
---|
| 3 | <script type="text/javascript"> |
---|
| 4 | |
---|
| 5 | function loadgraph() { |
---|
| 6 | |
---|
| 7 | var w = 1000, |
---|
| 8 | h = 800; |
---|
| 9 | |
---|
| 10 | $("#d3viz").empty(); |
---|
| 11 | |
---|
| 12 | var vis = d3.select("#d3viz").append("svg") |
---|
| 13 | .attr("width", w) |
---|
| 14 | .attr("height", h); |
---|
| 15 | |
---|
| 16 | var force = self.force = d3.layout.force() |
---|
| 17 | .distance(100) |
---|
| 18 | .charge(-1000) |
---|
| 19 | .size([w, h]); |
---|
| 20 | |
---|
| 21 | //zoom |
---|
| 22 | vis.append("rect") |
---|
| 23 | .attr("class", "overlay") |
---|
| 24 | .attr("width", w) |
---|
| 25 | .attr("height", h) |
---|
| 26 | .attr("fill", "white") |
---|
| 27 | .call(d3.behavior.zoom() |
---|
| 28 | .scaleExtent([0.3, 3]) |
---|
| 29 | .on("zoom", function() { |
---|
| 30 | vis.attr("transform", "translate(" + d3.event.translate + |
---|
| 31 | ")scale(" + d3.event.scale + ")"); |
---|
| 32 | })); |
---|
| 33 | |
---|
| 34 | vis = vis.append("g"); |
---|
| 35 | |
---|
| 36 | d3.json("[% c.uri_for('/json/tree', ci.id, { json => 1 }) %]", function(error, json) { |
---|
| 37 | |
---|
| 38 | force |
---|
| 39 | .nodes(json.nodes) |
---|
| 40 | .links(json.links) |
---|
| 41 | .start(); |
---|
| 42 | |
---|
| 43 | // build the arrow. |
---|
| 44 | vis.append("svg:defs").selectAll("marker") |
---|
| 45 | .data(["rel","sub"]) |
---|
| 46 | .enter().append("svg:marker") |
---|
| 47 | .attr("stroke", arrowcolor() ) |
---|
| 48 | .attr("id", function(d) { return "end" + d ; }) |
---|
| 49 | .attr("viewBox", "-5 -13 10 10") |
---|
| 50 | .attr("refX", 15) |
---|
| 51 | .attr("refY", -1.5) |
---|
| 52 | .attr("markerWidth", 16) |
---|
| 53 | .attr("markerHeight", 16) |
---|
| 54 | .attr("orient", "auto") |
---|
| 55 | .append("svg:path") |
---|
| 56 | .attr("d", "M-5,-7L5,-2L-5,3"); |
---|
| 57 | |
---|
| 58 | //build link + arrow |
---|
| 59 | var link = vis.selectAll(".link") |
---|
| 60 | .data(json.links) |
---|
| 61 | .enter().append("line") |
---|
| 62 | .attr("stroke", function(d) { |
---|
| 63 | return d.color ? d.color : 'black' |
---|
| 64 | }) |
---|
| 65 | .attr("stroke-dasharray", "0,2 1") |
---|
| 66 | .attr("class", function(d) { return "link" + d.type; }) |
---|
| 67 | .attr("marker-end", function(d) { return "url(#end" + d.type + ")"; }); |
---|
| 68 | |
---|
| 69 | // build the tooltip. |
---|
| 70 | var div = d3.select("#d3viz").append("div") |
---|
| 71 | .attr("class", "tooltip") |
---|
| 72 | .style("opacity", 0); |
---|
| 73 | |
---|
| 74 | //build node |
---|
| 75 | var node = vis.selectAll(".node") |
---|
| 76 | .data(json.nodes) |
---|
| 77 | .enter().append("g") |
---|
| 78 | .attr("class", "node") |
---|
| 79 | .call(force.drag) |
---|
| 80 | .on("contextmenu", function(d) { |
---|
| 81 | div.transition() |
---|
| 82 | .duration(700) |
---|
| 83 | .style("opacity", .9); |
---|
| 84 | div .html("<b>Name = </b>" + d.name) |
---|
| 85 | .style("left", (d3.event.pageX) + "px") |
---|
| 86 | .style("top", (d3.event.pageY - 28) + "px"); |
---|
| 87 | d3.event.preventDefault(); |
---|
| 88 | }) |
---|
| 89 | .on("mouseout", function(d) { |
---|
| 90 | div.transition() |
---|
| 91 | .delay(1000) |
---|
| 92 | .duration(300) |
---|
| 93 | .style("opacity", 0); |
---|
| 94 | }); |
---|
| 95 | |
---|
| 96 | node.append("image") |
---|
| 97 | .attr("class", "circle") |
---|
| 98 | .attr("xlink:href", function(d){ return d.img_href }) |
---|
| 99 | .attr("x", "-16px") |
---|
| 100 | .attr("y", "-16px") |
---|
| 101 | .attr("width", "32px") |
---|
| 102 | .attr("height", "32px"); |
---|
| 103 | |
---|
| 104 | node.append("text") |
---|
| 105 | .attr("class", "nodetext") |
---|
| 106 | .attr("dx", 16) |
---|
| 107 | .attr("dy", ".35em") |
---|
| 108 | .text(function(d) { return d.label }) |
---|
| 109 | .on("click", openLink() ); |
---|
| 110 | |
---|
| 111 | force.on("tick", function() { |
---|
| 112 | link.attr("x1", function(d) { return d.source.x; }) |
---|
| 113 | .attr("y1", function(d) { return d.source.y; }) |
---|
| 114 | .attr("x2", function(d) { return d.target.x; }) |
---|
| 115 | .attr("y2", function(d) { return d.target.y; }); |
---|
| 116 | |
---|
| 117 | node.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; }); |
---|
| 118 | }); |
---|
| 119 | function openLink() { |
---|
| 120 | return function(d) { |
---|
| 121 | //window.open("[% c.uri_for('/ci/link/') %]" + d.label, "_self") |
---|
| 122 | } |
---|
| 123 | } |
---|
| 124 | //Arrow color |
---|
| 125 | function arrowcolor() { |
---|
| 126 | return function(d) { |
---|
| 127 | var color = "black"; |
---|
| 128 | if(d == "rel") { |
---|
| 129 | color = "red"; |
---|
| 130 | } else if(d == "sub") { |
---|
| 131 | color = "green"; |
---|
| 132 | } |
---|
| 133 | return color; |
---|
| 134 | } |
---|
| 135 | } |
---|
| 136 | |
---|
| 137 | //link color |
---|
| 138 | function linkcolor() { |
---|
| 139 | return function(d) { |
---|
| 140 | var color = "black"; |
---|
| 141 | if(d.type == "rel") { |
---|
| 142 | color = "red"; |
---|
| 143 | } else if(d.type == "sub") { |
---|
| 144 | color = "green"; |
---|
| 145 | } |
---|
| 146 | return color; |
---|
| 147 | } |
---|
| 148 | } |
---|
| 149 | |
---|
| 150 | }); |
---|
| 151 | |
---|
| 152 | } |
---|
| 153 | |
---|
| 154 | loadgraph(); |
---|
| 155 | </script> |
---|