Subversion Repository Public Repository

ramani

Diff Revisions 579 vs 580 for /Ramani/web/restrito/grafo.xhtml

Diff revisions: vs.
  @@ -25,33 +25,68 @@
25 25 >
26 26 <center>
27 27 <p:tab id="tabAutor" title="Autor">
28 - <h:outputLabel value="Grafo de Autores "
29 - style="font-size: 25px; font-weight: bold"/>
30 - <hr/>
31 - <h:panelGrid columns="2">
32 - <h:outputText value="Nome do Autor"/>
33 - <p:autoComplete
34 - required="true"
35 - requiredMessage="É necessario selecionar um autor"
36 - id="autoCompleteAutor"
37 - forceSelection="true"
38 - minQueryLength="4"
39 - value="#{grafoBean.autor}"
40 - converter="AutorConverter"
41 - completeMethod="#{grafoBean.autoCompleteAutor}"
42 - var="autoComplete"
43 - itemLabel="#{autoComplete.nome}"
44 - itemValue="#{autoComplete}"
45 - />
46 - </h:panelGrid>
47 - <hr/>
28 + <center>
29 + <h:outputLabel value="Grafo de Autores "
30 + style="font-size: 25px; font-weight: bold;"/>
31 + <hr/>
32 + <h:panelGrid columns="2">
33 + <h:outputText value="Nome do Autor"/>
34 + <p:autoComplete
35 + required="true"
36 + requiredMessage="É necessario selecionar um autor"
37 + id="autoCompleteAutor"
38 + forceSelection="true"
39 + minQueryLength="4"
40 + value="#{grafoBean.autor}"
41 + converter="AutorConverter"
42 + completeMethod="#{grafoBean.autoCompleteAutor}"
43 + var="autoComplete"
44 + itemLabel="#{autoComplete.nome}"
45 + itemValue="#{autoComplete}"
46 + />
47 + </h:panelGrid>
48 + </center>
48 49
49 50 </p:tab>
50 51
51 52 <p:tab id="tabGrafo" title="Grafo">
53 + <style>
54 +
52 55
56 + .link {
57 + fill: none;
58 + stroke: #666;
59 + stroke-width: 1.5px;
60 + }
61 +
62 + #licensing {
63 + fill: green;
64 + }
65 +
66 + .link.licensing {
67 + stroke: green;
68 + }
69 +
70 + .link.resolved {
71 + stroke-dasharray: 0,2 1;
72 + }
73 +
74 + circle {
75 + fill: #3399ff;
76 + stroke: #333;
77 + stroke-width: 1.5px;
78 + }
79 +
80 + text {
81 + font: 10px sans-serif;
82 + pointer-events: none;
83 + text-shadow: 0 1px 0 #fff, 1px 0 0 #fff, 0 -1px 0 #fff, -1px 0 0 #fff;
84 + }
85 +
86 + </style>
53 87 <h:outputStylesheet library="css" name="grafo.css"/>
54 88 <h:outputScript library="js" name="d3.v3.min.js" ></h:outputScript>
89 + <div id="graph" style="border: 2px solid #3399ff; width: 1000px; height: 600px; margin: 0 auto"></div>
55 90 <script>
56 91
57 92 var links = ${grafoBean.citacoesAutor};
  @@ -60,16 +95,26 @@
60 95 var width = 1024;
61 96 var height = 768;
62 97
63 - var svg = d3.select("body").append("svg")
64 - .style("position", "absolute")
65 - .style("left", "10")
66 - .style("top", "230")
67 - .style("bottom", "10")
68 - .style("right", "00")
69 - .style("width","1135")
70 - .style("height","700")
98 +
99 + var randomX = d3.random.normal(width / 2, 80),
100 + randomY = d3.random.normal(height / 2, 80);
101 +
102 + var data = d3.range(2000).map(function() {
103 + return [
104 + randomX(),
105 + randomY()
106 + ];
107 + });
108 +
109 +
110 + var svg = d3.select("#graph").append("svg")
111 + .style("width", "1000")
112 + .style("height", "600")
113 + .style("margin", "0 auto")
71 114 .append("g")
72 - .attr("transform", "translate(0,0)");
115 + .call(d3.behavior.zoom().scaleExtent([1, 8]).on("zoom", zoom))
116 + .append("g");
117 + ;
73 118
74 119
75 120 links.forEach(function(link) {
  @@ -82,7 +127,7 @@
82 127 .links(links)
83 128 .size([width - margin.left - margin.right, height - margin.top - margin.bottom])
84 129 .linkDistance(60)
85 - .charge(-300)
130 + .charge(-50)
86 131 .on("tick", tick)
87 132 .start();
88 133
  @@ -115,7 +160,11 @@
115 160 .data(force.nodes())
116 161 .enter().append("circle")
117 162 .attr("r", 5)
118 - .call(force.drag);
163 + .call(force.drag)
164 + .attr("transform", function(d) {
165 + return "translate(" + d + ")";
166 + });
167 + ;
119 168
120 169 var text = svg.append("g").selectAll("text")
121 170 .data(force.nodes())
  @@ -143,6 +192,10 @@
143 192 return "translate(" + d.x + "," + d.y + ")";
144 193 }
145 194
195 + function zoom() {
196 + svg.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
197 + }
198 +
146 199
147 200 </script>
148 201 </p:tab>