WebCompDev / COMPONENTS

Commit 4f0953cd4af772fa1ccfa6f41302a49e0ef7aab6

Authored by Luigi Serra
1 parent ce4b5fb1

graph datalet

Inline Side-by-side
Showing 2 changed files with 89 additions and 24 deletions
datalets/graph-datalet/graph-datalet.html
  View file @4f0953c
... ... @@ -65,7 +65,7 @@ Example:
65 65 <div id="toolbar">
66 66 <paper-slider min="900" max="1500" value="{{width}}"></paper-slider>
67 67 </div>
68   - <div style="align-content: center;">
  68 + <div style="align-content: center;" id="graph-content">
69 69 <svg id="sbiricuda"></svg>
70 70 </div>
71 71 </div>
... ... @@ -79,6 +79,8 @@ Example:
79 79  
80 80 <script>
81 81  
  82 + var _this;
  83 +
82 84 Polymer({
83 85 is : 'graph-datalet',
84 86  
... ... @@ -97,7 +99,7 @@ Example:
97 99  
98 100 width: {
99 101 type: Number,
100   - value: 900,
  102 + value: undefined,
101 103 observer : '_widthChanged'
102 104 },
103 105  
... ... @@ -109,10 +111,20 @@ Example:
109 111 svg: {
110 112 type: Object,
111 113 value: undefined
112   - }
  114 + },
  115 +
  116 + gnodes:{
  117 + type: Array,
  118 + value: undefined
  119 + },
  120 +
  121 + glinks:{
  122 + type: Array,
  123 + value: undefined
  124 + },
113 125 },
114 126  
115   - /*buildGraph: function (t){
  127 + /* buildGraph: function (t){
116 128 var graph = {};
117 129  
118 130 graph.nodes = t.nodes;
... ... @@ -123,9 +135,9 @@ Example:
123 135 return t.value ? t.value : 80
124 136 }).on("tick", this.tick).start();
125 137  
126   - links = this.svg.selectAll(".link").data(graph.links).enter().append("line").attr("class", "link");
  138 + this.glinks = this.svg.selectAll(".link").data(graph.links).enter().append("line").attr("class", "link");
127 139  
128   - nodes = this.svg.selectAll(".node").data(graph.nodes).enter().append("g").attr("class", function (t) {
  140 + this.gnodes = this.svg.selectAll(".node").data(graph.nodes).enter().append("g").attr("class", function (t) {
129 141 return t.fixed ? "node fixed" : "node"
130 142 }).attr("name", function (t) {
131 143 return t.name ? t.name.split(" ").join("_").toLowerCase() : ""
... ... @@ -166,11 +178,15 @@ Example:
166 178 return t.y
167 179 });
168 180  
169   - nodes.attr("cx", function (t) {
  181 +
  182 +
  183 + _this.gnodes.attr("cx", function (t) {
170 184 return t.x = Math.max(25, Math.min(this.width - 50, t.x))
171 185 }).attr("cy", function (t) {
172 186 return t.y = Math.max(8, Math.min(600, t.y))
173   - }), links.attr("x1", function (t) {
  187 + });
  188 +
  189 + _this.glinks.attr("x1", function (t) {
174 190 return t.source.x
175 191 }).attr("y1", function (t) {
176 192 return t.source.y
... ... @@ -221,12 +237,25 @@ Example:
221 237 svg = d3.select("svg#sbiricuda").attr("class", "svg").attr({
222 238 width: "100%",
223 239 height: "100%"
224   - }).attr("viewBox", "0 0 " + this.width + " " + this.height).attr("pointer-events", "all").style("position", "absolute").attr("style", "transform:translate(0px)");
  240 + })//.attr("viewBox", "0 0 " + this.width + " " + this.height).attr("pointer-events", "all").style("position", "absolute").attr("style", "transform:translate(0px)");
225 241  
226 242 var g = JSON.parse(this.data);
227 243 g.nodes[0].x = this.width / 2;
228 244 g.nodes[0].y = this.height / 2;
229 245 buildGraph(g);
  246 +
  247 + /* _this = this;
  248 +
  249 + this.height = 9 * this.width / 16;
  250 + this.svg = d3.select("svg#sbiricuda").attr("class", "svg").attr({
  251 + width: "100%",
  252 + height: "100%"
  253 + }).attr("viewBox", "0 0 " + this.width + " " + this.height).attr("pointer-events", "all").style("position", "absolute").attr("style", "transform:translate(0px)");
  254 +
  255 + var g = JSON.parse(this.data);
  256 + g.nodes[0].x = this.width / 2;
  257 + g.nodes[0].y = this.height / 2;
  258 + this.buildGraph(g);*/
230 259 },
231 260  
232 261 _widthChanged: function(oldValue, newValue){
... ... @@ -239,6 +268,10 @@ Example:
239 268 width: "100%",
240 269 height: "100%"
241 270 }).attr("viewBox", "0 0 " + this.width + " " + height).attr("pointer-events", "all").style("position", "absolute").attr("style", "transform:translate(0px)");
  271 +
  272 + var g = JSON.parse(this.data);
  273 + g.nodes[0].x = this.width / 2;
  274 + g.nodes[0].y = this.height / 2;
242 275 }
243 276 });
244 277 </script>
... ...
datalets/graph-datalet/static/js/buildGraph.js
  View file @4f0953c
  1 +
  2 +var nodes;
  3 +var links;
  4 +
1 5 function buildGraph(t) {
2   - var graph = {};
  6 + var graph = {};
3 7  
4 8 graph.nodes = t.nodes;
5 9 graph.links = t.links;
6 10  
7   - force = d3.layout.force().nodes(graph.nodes).links(graph.links).size([width, height]).charge(-1e3).friction(.7).linkDistance(function (t)
  11 + force = d3.layout.force().nodes(graph.nodes).links(graph.links).size([width, height]).charge(-1e3).friction(.5).linkDistance(function (t)
8 12 {
9 13 return t.value ? t.value : 80
10 14 }).on("tick", tick).start();
11 15  
12   - links = svg.selectAll(".link").data(graph.links).enter().append("line").attr("class", "link");
  16 +svg=svg.append("g")
  17 + .call(d3.behavior.zoom().scaleExtent([.25, 20]).on("zoom", zoom))
  18 + .append("g");
  19 +
  20 + svg.append("rect")
  21 + .attr("fill", "white")
  22 + .attr("width", width)
  23 + .attr("height", height);
13 24  
14   - nodes = svg.selectAll(".node").data(graph.nodes).enter().append("g").attr("class", function (t) {
  25 + links = svg.selectAll(".link").data(graph.links).enter().append("line").attr("class", "link");
  26 +
  27 + nodes = svg.selectAll(".node").data(graph.nodes).enter().append("g")
  28 + .attr("class", function (t) {
15 29 return t.fixed ? "node fixed" : "node"
16 30 }).attr("name", function (t) {
17 31 return t.name ? t.name.split(" ").join("_").toLowerCase() : ""
18   - }).on("mouseover", mouseover).on("mouseout", mouseout).on("click", active).append("circle").attr("class", function (t) {
19   - return t.fixed ? "" : "drag"
20   - }).attr("r", function (t) {
21   - return t.r ? t.r : 15
22   - }).attr("style", function (t) {
23   - return t.color ? "stroke:" + t.color : !1
24   - });
  32 + }).on("mouseover", mouseover).on("mouseout", mouseout).on("click", active)
  33 + .append("circle")
  34 + .attr("class", function (t) {
  35 + return t.fixed ? "" : "drag"
  36 + })
  37 + .attr("r", function (t) {
  38 + return t.r ? t.r : 15
  39 + })
  40 + .attr("style", function (t) {
  41 + return t.color ? "stroke:" + t.color : !1
  42 + });
25 43  
26 44 //d3.selectAll(".drag").call(force.drag), svg.selectAll("g.fixed").call(text);
27 45 d3.selectAll(".drag").call(force.drag), svg.selectAll("g.node").call(text);
28 46  
29   - svg.call(d3.behavior.zoom().scaleExtent([1, 8]).on("zoom", zoom));
30   - svg.selectAll(".node").attr("transform", function(d) { return "translate(" + d + ")"; });
31   - svg.selectAll(".link").attr("transform", function(d) { return "translate(" + d + ")"; });
  47 + /* d3.selectAll("circle").attr("transform", function(t) {
  48 + return "translate(" + t.x + "," + t.y + ")";
  49 + });*/
  50 + //d3.selectAll("circle").attr("transform", function(t) {
  51 + // return "translate(" + t + ")";
  52 + // });
32 53  
33 54 }
  55 +
  56 +function destroyGraph(){
  57 + nodes.remove();
  58 + links.remove();
  59 + svg.remove();
  60 + nodes = [];
  61 + links = [];
  62 +}
  63 +
34 64 function zoom() {
35 65 svg.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
36 66 }
... ... @@ -71,7 +101,9 @@ function tick() {
71 101 return t.x = Math.max(25, Math.min(width - 50, t.x))
72 102 }).attr("cy", function (t) {
73 103 return t.y = Math.max(8, Math.min(600, t.y))
74   - }), links.attr("x1", function (t) {
  104 + });
  105 +
  106 + links.attr("x1", function (t) {
75 107 return t.source.x
76 108 }).attr("y1", function (t) {
77 109 return t.source.y
... ...