Ramani
Subversion Repository Public Repository

ramani

URLs

Copy to Clipboard
Explore
Commits

Diff Revisions 566 vs 567 for /Ramani/web/restrito/grafo.xhtml

Diff revisions: vs.
  @@ -6,9 +6,9 @@
6 6 xmlns:f="http://java.sun.com/jsf/core"
7 7 xmlns:ui="http://java.sun.com/jsf/facelets">
8 8 <h:head>
9 -
9 +
10 10 </h:head>
11 -
11 +
12 12 <h:body>
13 13 <ui:composition template="../template.xhtml">
14 14 <ui:define name="caminho">
  @@ -17,103 +17,142 @@
17 17 </ui:define>
18 18 <ui:define name="conteudoCentro">
19 19 <p:layout>
20 - <h:form>
21 -
22 - <p:layoutUnit position="center">
23 - <center>
24 - <h:outputLabel value="Grafo de Autores"
25 - style="font-size: 25px; font-weight: bold"/>
26 -
27 - <h:outputStylesheet library="css" name="grafo.css"/>
28 - <h:outputScript library="js" name="d3.v3.min.js"></h:outputScript>
29 - <script>
30 -
31 - var links = ${grafoBean.getAutores()};
32 - var nodes={};
33 - var margin = {top: 0, right: 0, bottom: 0, left: 0};
34 - var width = 1024,
35 - height = 768;
36 -
37 - var svg = d3.select("body").append("svg")
38 - .style("position","absolute")
39 - .style("left","200")
40 - .style("top","80")
41 - .style("bottom","10")
42 - .style("right","00")
43 - .append("g")
44 - .attr("transform", "translate(0,0)");
45 -
46 -
47 - links.forEach(function(link) {
48 - link.source = nodes[link.source] || (nodes[link.source] = {name: link.source});
49 - link.target = nodes[link.target] || (nodes[link.target] = {name: link.target});
50 - });
51 -
52 - var force = d3.layout.force()
53 - .nodes(d3.values(nodes))
54 - .links(links)
55 - .size([width-margin.left - margin.right, height - margin.top - margin.bottom])
56 - .linkDistance(60)
57 - .charge(-300)
58 - .on("tick", tick)
59 - .start();
60 -
61 - svg.append("defs").selectAll("marker")
62 - .data([1,2,3,6])
63 - .enter().append("marker")
64 - .attr("id", function(d) { return d; })
65 - .attr("viewBox", "0 -5 10 10")
66 - .attr("refX", 15)
67 - .attr("refY", -1.5)
68 - .attr("markerWidth", 0)
69 - .attr("markerHeight", 0)
70 - .attr("orient", "auto")
71 - .append("path")
72 - .attr("d", "M0,-5L10,0L0,5");
73 -
74 - var path = svg.append("g").selectAll("path")
75 - .data(force.links())
76 - .enter().append("path")
77 - .attr("class", function(d) { return "link " + d.type; })
78 - .attr("marker-end", function(d) { return "url(#" + d.type + ")"; });
79 -
80 - var circle = svg.append("g").selectAll("circle")
20 + <h:form>
21 + <p:layoutUnit position="center" >
22 +
23 + <p:wizard
24 + flowListener="#{grafoBean.onFlowProcessAutorArtigo}"
25 + >
26 + <center>
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/>
48 +
49 + </p:tab>
50 +
51 + <p:tab id="tabGrafo" title="Grafo">
52 +
53 + <h:outputStylesheet library="css" name="grafo.css"/>
54 + <h:outputScript library="js" name="d3.v3.min.js" ></h:outputScript>
55 + <script>
56 +
57 + var links = ${grafoBean.citacoesAutor};
58 + var nodes = {};
59 + var margin = {top: 0, right: 0, bottom: 0, left: 0};
60 + var width = 1024;
61 + var height = 768;
62 +
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")
71 + .append("g")
72 + .attr("transform", "translate(0,0)");
73 +
74 +
75 + links.forEach(function(link) {
76 + link.source = nodes[link.source] || (nodes[link.source] = {name: link.source});
77 + link.target = nodes[link.target] || (nodes[link.target] = {name: link.target});
78 + });
79 +
80 + var force = d3.layout.force()
81 + .nodes(d3.values(nodes))
82 + .links(links)
83 + .size([width - margin.left - margin.right, height - margin.top - margin.bottom])
84 + .linkDistance(60)
85 + .charge(-300)
86 + .on("tick", tick)
87 + .start();
88 +
89 + svg.append("defs").selectAll("marker")
90 + .data([1, 2, 3, 6])
91 + .enter().append("marker")
92 + .attr("id", function(d) {
93 + return d;
94 + })
95 + .attr("viewBox", "0 -5 10 10")
96 + .attr("refX", 15)
97 + .attr("refY", -1.5)
98 + .attr("markerWidth", 0)
99 + .attr("markerHeight", 0)
100 + .attr("orient", "auto")
101 + .append("path")
102 + .attr("d", "M0,-5L10,0L0,5");
103 +
104 + var path = svg.append("g").selectAll("path")
105 + .data(force.links())
106 + .enter().append("path")
107 + .attr("class", function(d) {
108 + return "link " + d.type;
109 + })
110 + .attr("marker-end", function(d) {
111 + return "url(#" + d.type + ")";
112 + });
113 +
114 + var circle = svg.append("g").selectAll("circle")
81 115 .data(force.nodes())
82 116 .enter().append("circle")
83 - .attr("r", 10)
117 + .attr("r", 1)
84 118 .call(force.drag);
85 119
86 - var text = svg.append("g").selectAll("text")
87 - .data(force.nodes())
88 - .enter().append("text")
89 - .attr("x", 8)
90 - .attr("y", ".31em")
91 - .text(function(d) { return d.name; });
92 -
93 - function tick() {
94 - path.attr("d", linkArc);
95 - circle.attr("transform", transform);
96 - text.attr("transform", transform);
97 - }
98 -
99 - function linkArc(d) {
100 - var dx = d.target.x - d.source.x,
101 - dy = d.target.y - d.source.y,
102 - dr = Math.sqrt(dx * dx + dy * dy);
103 - return "M" + d.source.x + "," + d.source.y + "A" + dr + "," + dr + " 0 0,1 " + d.target.x + "," + d.target.y;
104 - }
105 -
106 - function transform(d) {
107 - return "translate(" + d.x + "," + d.y + ")";
108 - }
109 -
110 -
111 - </script>
112 - </center>
113 - </p:layoutUnit>
114 - </h:form>
120 + var text = svg.append("g").selectAll("text")
121 + .data(force.nodes())
122 + .enter().append("text")
123 + .attr("x", 8)
124 + .attr("y", ".31em")
125 + .text(function(d) {
126 + return d.name;
127 + });
128 +
129 + function tick() {
130 + path.attr("d", linkArc);
131 + circle.attr("transform", transform);
132 + text.attr("transform", transform);
133 + }
134 +
135 + function linkArc(d) {
136 + var dx = d.target.x - d.source.x,
137 + dy = d.target.y - d.source.y,
138 + dr = Math.sqrt(dx * dx + dy * dy);
139 + return "M" + d.source.x + "," + d.source.y + "A" + dr + "," + dr + " 0 0,1 " + d.target.x + "," + d.target.y;
140 + }
141 +
142 + function transform(d) {
143 + return "translate(" + d.x + "," + d.y + ")";
144 + }
145 +
146 +
147 + </script>
148 + </p:tab>
149 + </center>
150 +
151 + </p:wizard>
152 + </p:layoutUnit>
153 + </h:form>
115 154 </p:layout>
116 - </ui:define>
155 + </ui:define>
117 156 </ui:composition>
118 157 </h:body>
119 158 </html>

View View this file contents

History View the full history

Feeds

Commits for /Ramani/web/restrito/grafo.xhtml

Need assistance?   Get in touch, or head to our documentation site.