Subversion Repository Public Repository

ramani

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:p="http://primefaces.org/ui"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets">
    <h:head> 
        
    </h:head>
 
    <h:body>
        <ui:composition template="../template.xhtml">
            <ui:define name="caminho">
                <h:outputLabel value="/ Criar visualizaĆ§Ć£o"
                               style="font-weight: bold"/>
            </ui:define>
            <ui:define name="conteudoCentro">
                <p:layout>
                    <h:form>                   
                   
                    <p:layoutUnit position="center">
                        <center>
                            <h:outputLabel value="Grafo de Autores"
                                           style="font-size: 25px; font-weight: bold"/>
                            
                        <h:outputStylesheet library="css" name="grafo.css"/>
                        <h:outputScript library="js" name="d3.v3.min.js"></h:outputScript>
                        <script>
                            
                            var links = ${grafoBean.getAutores()};
                            var nodes={};
                            var margin = {top: 0, right: 0, bottom: 0, left: 0};
                            var width = 1024,
                                height = 768;
                            
                            var svg = d3.select("body").append("svg")
                                        .style("position","absolute")
                                        .style("left","200")
                                        .style("top","80")
                                        .style("bottom","10")
                                        .style("right","00")
                                        .append("g")
                                        .attr("transform", "translate(0,0)");
                           
                      
                            links.forEach(function(link) {
                                            link.source = nodes[link.source] || (nodes[link.source] = {name: link.source});
                                            link.target = nodes[link.target] || (nodes[link.target] = {name: link.target});
                                          });
                          
                            var force = d3.layout.force()
                                        .nodes(d3.values(nodes))
                                        .links(links)
                                        .size([width-margin.left - margin.right, height - margin.top - margin.bottom])
                                        .linkDistance(60)
                                        .charge(-300)
                                        .on("tick", tick)
                                        .start();
                                
                                    svg.append("defs").selectAll("marker")
                                      .data([1,2,3,6])
                                      .enter().append("marker")
                                      .attr("id", function(d) { return d; })
                                      .attr("viewBox", "0 -5 10 10")
                                      .attr("refX", 15)
                                      .attr("refY", -1.5)
                                      .attr("markerWidth", 0)
                                      .attr("markerHeight", 0)
                                      .attr("orient", "auto")
                                      .append("path")
                                      .attr("d", "M0,-5L10,0L0,5");

                                    var path = svg.append("g").selectAll("path")
                                                  .data(force.links())
                                                  .enter().append("path")
                                                  .attr("class", function(d) { return "link " + d.type; })
                                                  .attr("marker-end", function(d) { return "url(#" + d.type + ")"; });
                                          
                                    var circle = svg.append("g").selectAll("circle")
                                                    .data(force.nodes())
                                                    .enter().append("circle")
                                                    .attr("r", 10)
                                                    .call(force.drag);

                                    var text = svg.append("g").selectAll("text")
                                                  .data(force.nodes())
                                                  .enter().append("text")
                                                  .attr("x", 8)
                                                  .attr("y", ".31em")
                                                  .text(function(d) { return d.name; });

                                    function tick() {
                                      path.attr("d", linkArc);
                                      circle.attr("transform", transform);
                                      text.attr("transform", transform);
                                    }

                                    function linkArc(d) {
                                      var dx = d.target.x - d.source.x,
                                          dy = d.target.y - d.source.y,
                                          dr = Math.sqrt(dx * dx + dy * dy);
                                      return "M" + d.source.x + "," + d.source.y + "A" + dr + "," + dr + " 0 0,1 " + d.target.x + "," + d.target.y;
                                    }

                                    function transform(d) {
                                      return "translate(" + d.x + "," + d.y + ")";
                                    }
                                  
                                    
                        </script>
                        </center>
                    </p:layoutUnit>
                </h:form>
                </p:layout>
          </ui:define>
        </ui:composition>
    </h:body>
</html>

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

Diff revisions: vs.
Revision Author Commited Message
565 heartle picture heartle Wed 03 Dec, 2014 15:44:35 +0000