SGH / COMPONENTS

Commit 170197f1486d2122860c56c8ab849411df52f1c3

Authored by Renato De Donato
2 parents cae62033 1dd8eefe

Merge branch 'master' of http://service.routetopa.eu:7480/WebCompDev/COMPONENTS

Inline Side-by-side
Showing 4 changed files with 190 additions and 144 deletions
datalets/graph-datalet/demo/demo-clustering.html
  View file @170197f
@@ -15,7 +15,7 @@ @@ -15,7 +15,7 @@
15 '\'></graph-with-clustering-extend-datalet>'; 15 '\'></graph-with-clustering-extend-datalet>';
16 } 16 }
17 }; 17 };
18 - xhttp.open("GET", "http://192.168.164.128/public_room/ajax/get-graph?id=1&type=comments", true); 18 + xhttp.open("GET", "http://192.168.164.128/public_room/ajax/get-graph?id=8&type=comments", true);
19 xhttp.send(); 19 xhttp.send();
20 } 20 }
21 21
datalets/graph-datalet/graph-datalet.html
  View file @170197f
@@ -96,18 +96,16 @@ Example: @@ -96,18 +96,16 @@ Example:
96 96
97 <script> 97 <script>
98 98
99 - gnodes = [];  
100 - glinks = [];  
101 -  
102 - width = undefined;  
103 - height = undefined;  
104 - svg = undefined;  
105 _this = null; 99 _this = null;
106 - prev_selected_node = null;  
107 100
108 Polymer({ 101 Polymer({
109 is : 'graph-datalet', 102 is : 'graph-datalet',
110 103
  104 + listeners: {
  105 + 'graph-datalet_on-node-hover' : '_onNodeHover',
  106 + 'graph-datalet_on-node-out' : '_onNodeOut'
  107 + },
  108 +
111 properties: { 109 properties: {
112 /** 110 /**
113 * It's the url for the preview 111 * It's the url for the preview
@@ -116,11 +114,21 @@ Example: @@ -116,11 +114,21 @@ Example:
116 * @type Strig 114 * @type Strig
117 * @default '' 115 * @default ''
118 */ 116 */
119 - data : { 117 + graph : {
120 type : Object, 118 type : Object,
121 value : undefined 119 value : undefined
122 }, 120 },
123 121
  122 + gnodes : {
  123 + type : Array,
  124 + value : []
  125 + },
  126 +
  127 + glinks : {
  128 + type : Array,
  129 + value : []
  130 + },
  131 +
124 width: { 132 width: {
125 type: Number, 133 type: Number,
126 value: undefined 134 value: undefined
@@ -128,7 +136,7 @@ Example: @@ -128,7 +136,7 @@ Example:
128 136
129 height : { 137 height : {
130 type : Number, 138 type : Number,
131 - type: undefined 139 + value: undefined
132 }, 140 },
133 141
134 svg: { 142 svg: {
@@ -138,6 +146,11 @@ Example: @@ -138,6 +146,11 @@ Example:
138 feelings:{ 146 feelings:{
139 type: Array, 147 type: Array,
140 values: ["Agree", "Neutral", "Not agree"] 148 values: ["Agree", "Neutral", "Not agree"]
  149 + },
  150 +
  151 + prev_selected_node : {
  152 + type : Object,
  153 + value : null
141 } 154 }
142 }, 155 },
143 156
@@ -148,9 +161,9 @@ Example: @@ -148,9 +161,9 @@ Example:
148 .append("g"); 161 .append("g");
149 162
150 //set initial zoom 163 //set initial zoom
151 - scale = (1.0); 164 + var scale = (1.0);
152 //translate = [(width-scale*width)/2, ((height-scale*height)/4)]; 165 //translate = [(width-scale*width)/2, ((height-scale*height)/4)];
153 - translate = [100, 100]; 166 + var translate = [100, 100];
154 this.svg.transition() 167 this.svg.transition()
155 .duration(750) 168 .duration(750)
156 .attr("transform", "translate(" + translate + ")scale(" + scale + ")") 169 .attr("transform", "translate(" + translate + ")scale(" + scale + ")")
@@ -163,8 +176,8 @@ Example: @@ -163,8 +176,8 @@ Example:
163 176
164 this.svg.append("rect") 177 this.svg.append("rect")
165 .attr("fill", "white") 178 .attr("fill", "white")
166 - .attr("width", width)  
167 - .attr("height", height); 179 + .attr("width", this.width)
  180 + .attr("height", this.height);
168 181
169 182
170 var graph = {}; 183 var graph = {};
@@ -174,15 +187,6 @@ Example: @@ -174,15 +187,6 @@ Example:
174 187
175 //pezzotto 188 //pezzotto
176 for(var i =0; i < graph.nodes.length; i++){ 189 for(var i =0; i < graph.nodes.length; i++){
177 - /*this.svg.append("filter")  
178 - .attr("id","filter_" + graph.nodes[i].id)  
179 - .attr("x","0%")  
180 - .attr("y","0%")  
181 - .attr("width","100%")  
182 - .attr("height","100%")  
183 - .append("feImage")  
184 - .attr("xlink:href", graph.nodes[i].image);*/  
185 -  
186 this.svg.append("defs") 190 this.svg.append("defs")
187 .append("pattern") 191 .append("pattern")
188 .attr("id","image_" + graph.nodes[i].id) 192 .attr("id","image_" + graph.nodes[i].id)
@@ -203,7 +207,7 @@ Example: @@ -203,7 +207,7 @@ Example:
203 return t.value ? t.value : 80 207 return t.value ? t.value : 80
204 }).on("tick", this.tick).start(); 208 }).on("tick", this.tick).start();
205 209
206 - glinks = this.svg.selectAll(".link").data(graph.links).enter().append("line").attr("class", "link"); 210 + this.glinks = this.svg.selectAll(".link").data(graph.links).enter().append("line").attr("class", "link");
207 211
208 this.svg.selectAll(".link") 212 this.svg.selectAll(".link")
209 .attr("style", function(t){ 213 .attr("style", function(t){
@@ -213,24 +217,18 @@ Example: @@ -213,24 +217,18 @@ Example:
213 return "stroke-width:" + (t.size ? t.size : 1.0) + "px"; 217 return "stroke-width:" + (t.size ? t.size : 1.0) + "px";
214 }); 218 });
215 219
216 - gnodes = this.svg.selectAll(".node").data(graph.nodes).enter().append("g").attr("class", function (t) {  
217 - return t.fixed ? "node fixed" : "node"  
218 - })  
219 - .attr("name", function (t) {  
220 - return t.name ? t.name.split(" ").join("_").toLowerCase() : ""  
221 - }).on("mouseover", this.mouseover)  
222 - .on("mouseout", this.mouseout)  
223 - .on("click", this.active) 220 + this.gnodes = this.svg.selectAll(".node").data(graph.nodes).enter().append("g")
  221 + .attr("class", function (t) { return t.fixed ? "node fixed" : "node"})
  222 + .attr("id", function (t) { return "g" + t.id;})
  223 + .attr("name", function (t) { return t.name ? t.name.split(" ").join("_").toLowerCase() : ""})
  224 + .on("mouseover", this.mouseover)
  225 + .on("mouseout", this.mouseout)
  226 + .on("click", this.active)
224 .append("circle") 227 .append("circle")
225 - .attr("id", function(t){  
226 - return t.id;  
227 - })  
228 - .attr("class", function (t) {  
229 - return t.fixed ? "" : "drag"  
230 - })  
231 - .attr("r", function (t) {  
232 - return t.r ? t.r : 15  
233 - }) 228 + .attr("id", function(t){ return t.id;})
  229 + .attr("originalId", function (t) { return t.originalId;})
  230 + .attr("class", function (t) { return t.fixed ? "" : "drag"})
  231 + .attr("r", function (t) {return t.r ? t.r : 15})
234 .attr("style", function (t) { 232 .attr("style", function (t) {
235 switch(parseInt(t.sentiment)){ 233 switch(parseInt(t.sentiment)){
236 case 1 : 234 case 1 :
@@ -248,19 +246,16 @@ Example: @@ -248,19 +246,16 @@ Example:
248 return "fill:" + t.color + "; stroke:white" 246 return "fill:" + t.color + "; stroke:white"
249 }); 247 });
250 248
251 - //d3.selectAll('circle').attr("filter", function(t){return t.image ? 'url(#filter_' + t.id +')' : ""});  
252 d3.selectAll('circle').attr("style", function(t){ 249 d3.selectAll('circle').attr("style", function(t){
253 - return "fill :" + (t.image ? 'url(#image_' + t.id +')' : t.color)}); 250 + return "fill :" + (t.image ? 'url(#image_' + t.id +')' : t.color)
  251 + });
254 252
255 - //d3.selectAll(".drag").call(force.drag), svg.selectAll("g.fixed").call(text);  
256 d3.selectAll(".drag").call(force.drag), this.svg.selectAll("g.node").call(this.text); 253 d3.selectAll(".drag").call(force.drag), this.svg.selectAll("g.node").call(this.text);
257 254
258 - svg = this.svg;  
259 -  
260 }, 255 },
261 256
262 zoom: function() { 257 zoom: function() {
263 - svg.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")"); 258 + _this.svg.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
264 }, 259 },
265 260
266 text: function (t) 261 text: function (t)
@@ -275,35 +270,37 @@ Example: @@ -275,35 +270,37 @@ Example:
275 }, 270 },
276 271
277 tick : function () { 272 tick : function () {
278 - // d3.select("svg").attr("style", "transform:translate(8%)");  
279 - d3.selectAll("g foreignObject").attr("x", function (t) {  
280 - return t.x + (t.r ? 0.8 * t.r : 15)  
281 - }).attr("y", function (t) {  
282 - return t.y - 20  
283 - }); 273 + if(_this.gnodes != undefined)
  274 + {
  275 + d3.selectAll("g foreignObject").attr("x", function (t) {
  276 + return t.x + (t.r ? 0.8 * t.r : 15)
  277 + }).attr("y", function (t) {
  278 + return t.y - 20
  279 + });
284 280
285 - d3.selectAll("#logo text").attr("x", function (t) {  
286 - return t.x + .7 * (t.r ? t.r : 15)  
287 - }).attr("y", function (t) {  
288 - return t.y  
289 - }); 281 + d3.selectAll("#logo text").attr("x", function (t) {
  282 + return t.x + .7 * (t.r ? t.r : 15)
  283 + }).attr("y", function (t) {
  284 + return t.y
  285 + });
290 286
291 287
292 - gnodes.attr("cx", function (t) {  
293 - return t.x = Math.max(25, Math.min(width - 50, t.x))  
294 - }).attr("cy", function (t) {  
295 - return t.y = Math.max(8, Math.min(600, t.y))  
296 - }); 288 + _this.gnodes.attr("cx", function (t) {
  289 + return t.x = Math.max(25, Math.min(_this.width - 50, t.x))
  290 + }).attr("cy", function (t) {
  291 + return t.y = Math.max(8, Math.min(600, t.y))
  292 + });
297 293
298 - glinks.attr("x1", function (t) {  
299 - return t.source.x  
300 - }).attr("y1", function (t) {  
301 - return t.source.y  
302 - }).attr("x2", function (t) {  
303 - return t.target.x  
304 - }).attr("y2", function (t) {  
305 - return t.target.y  
306 - }) 294 + _this.glinks.attr("x1", function (t) {
  295 + return t.source.x
  296 + }).attr("y1", function (t) {
  297 + return t.source.y
  298 + }).attr("x2", function (t) {
  299 + return t.target.x
  300 + }).attr("y2", function (t) {
  301 + return t.target.y
  302 + });
  303 + }
307 }, 304 },
308 mouseover : function (t) { 305 mouseover : function (t) {
309 d3.select(this).selectAll("circle").transition().duration(600).ease("elastic") 306 d3.select(this).selectAll("circle").transition().duration(600).ease("elastic")
@@ -332,14 +329,14 @@ Example: @@ -332,14 +329,14 @@ Example:
332 329
333 _this.fire('graph-datalet_node-clicked', {node : t}); 330 _this.fire('graph-datalet_node-clicked', {node : t});
334 331
335 - if(prev_selected_node != null){  
336 - prev_selected_node.style.fill = prev_selected_node.style.stroke;  
337 - prev_selected_node.style.stroke = "#FFFFFF"; 332 + if(_this.prev_selected_node != null){
  333 + _this.prev_selected_node.style.fill = _this.prev_selected_node.style.stroke;
  334 + _this.prev_selected_node.style.stroke = "#FFFFFF";
338 } 335 }
339 336
340 - prev_selected_node = document.getElementById("" + t.id);  
341 - prev_selected_node.style.fill = "#FFFFFF"  
342 - prev_selected_node.style.stroke = t.color; 337 + _this.prev_selected_node = document.getElementById("" + t.id);
  338 + _this. prev_selected_node.style.fill = "#FFFFFF"
  339 + _this.prev_selected_node.style.stroke = t.color;
343 340
344 /* _this.$.dialog.close(); 341 /* _this.$.dialog.close();
345 _this.$.dialog_title.innerHTML = t.name; 342 _this.$.dialog_title.innerHTML = t.name;
@@ -352,6 +349,30 @@ Example: @@ -352,6 +349,30 @@ Example:
352 //_this.$.dialog.close(); 349 //_this.$.dialog.close();
353 }, 350 },
354 351
  352 + _onNodeHover : function(e){
  353 + try {
  354 + var nodeId = $("[originalId=" + e.detail.id + "]")[0].id;
  355 + var gNode = $("#g" + nodeId)[0];
  356 + var node = this.graph.nodes[nodeId];
  357 +
  358 + d3.select(gNode).selectAll("circle").transition().duration(600).ease("elastic")
  359 + .attr("r", function (t) {
  360 + return (!t.image) ? 1 == t.fixed ? 1.4 * t.r : t.r + 10 : t.r;
  361 + });
  362 +
  363 + _this.$.dialog.close();
  364 + _this.$.dialog_title.innerHTML = node.name;
  365 + _this.$.dialog_content.innerHTML = node.content;
  366 +
  367 + _this.$.dialog.open();
  368 + }catch(e){}
  369 +
  370 + },
  371 +
  372 + _onNodeOut : function(e){
  373 + this.mouseout();
  374 + },
  375 +
355 /** 376 /**
356 * It is called after the element’s template has been stamped and all elements inside the element’s local 377 * It is called after the element’s template has been stamped and all elements inside the element’s local
357 * DOM have been configured (with values bound from parents, deserialized attributes, or else default values) 378 * DOM have been configured (with values bound from parents, deserialized attributes, or else default values)
@@ -366,26 +387,16 @@ Example: @@ -366,26 +387,16 @@ Example:
366 387
367 _this = this; 388 _this = this;
368 389
369 - //this.height = 9 * this.width / 16;  
370 - //this.height = this.width;  
371 -  
372 - width = this.width;  
373 - height = this.height;  
374 -  
375 - //this.$.graph_content.style.height = height + "px";  
376 390
377 this.svg = d3.select("svg#sbiricuda").attr("class", "svg").attr({ 391 this.svg = d3.select("svg#sbiricuda").attr("class", "svg").attr({
378 width: "100%", 392 width: "100%",
379 height: "100%" 393 height: "100%"
380 - }).attr("viewBox", "0 0 " + this.width + " " + this.height).attr("pointer-events", "all").style("position", "absolute").attr("style", "transform:translate(0px)");  
381 -  
382 - /*var g = JSON.parse(this.data);  
383 - g.nodes[0].x = this.width / 2;  
384 - g.nodes[0].y = this.height / 2;  
385 - this.buildGraph(g);*/ 394 + }).attr("viewBox", "0 0 " + this.width + " " + this.height)
  395 + .attr("pointer-events", "all")
  396 + .attr("style", "transform:translate(0px)")
  397 + .style("position", "absolute");
386 398
387 - var json = JSON.stringify(this.data);  
388 - var g = this.data; 399 + var g = this.graph;
389 g.nodes[0].x = this.width / 2; 400 g.nodes[0].x = this.width / 2;
390 g.nodes[0].y = this.height / 8; 401 g.nodes[0].y = this.height / 8;
391 this.buildGraph(g); 402 this.buildGraph(g);
datalets/graph-datalet/graph-with-clustering-datalet.html
  View file @170197f
@@ -97,6 +97,11 @@ Example: @@ -97,6 +97,11 @@ Example:
97 Polymer({ 97 Polymer({
98 is : 'graph-with-clustering-datalet', 98 is : 'graph-with-clustering-datalet',
99 99
  100 + listeners: {
  101 + 'graph-datalet_on-node-select' : '_onNodeSelect',
  102 + 'graph-datalet_on-node-out' : '_onNodeOut'
  103 + },
  104 +
100 properties: { 105 properties: {
101 /** 106 /**
102 * It's the url for the preview 107 * It's the url for the preview
@@ -138,6 +143,7 @@ Example: @@ -138,6 +143,7 @@ Example:
138 type: Array, 143 type: Array,
139 values: ["Agree", "Neutral", "Not agree"] 144 values: ["Agree", "Neutral", "Not agree"]
140 }, 145 },
  146 +
141 prev_selected_node : { 147 prev_selected_node : {
142 type : Object, 148 type : Object,
143 value : null 149 value : null
@@ -200,11 +206,11 @@ Example: @@ -200,11 +206,11 @@ Example:
200 return fill(d);*/ 206 return fill(d);*/
201 switch((d % 3)){ 207 switch((d % 3)){
202 case 0 : 208 case 0 :
203 - return "#1F77B4"; 209 + return "transparent";//"#1F77B4";//neutral
204 case 1 : 210 case 1 :
205 - return "#2CA02C"; 211 + return "#2CA02C";//agree
206 case 2: 212 case 2:
207 - return "#FF1E1E"; 213 + return "transparent";//"#FF1E1E";//disagree
208 } 214 }
209 }, 215 },
210 216
@@ -277,7 +283,6 @@ Example: @@ -277,7 +283,6 @@ Example:
277 283
278 for(var n=0; n < this.groups[g][s].values.length;n++) 284 for(var n=0; n < this.groups[g][s].values.length;n++)
279 nodesMap[this.groups[g][s].values[n].id] = node; 285 nodesMap[this.groups[g][s].values[n].id] = node;
280 -  
281 } 286 }
282 } 287 }
283 } 288 }
@@ -322,7 +327,6 @@ Example: @@ -322,7 +327,6 @@ Example:
322 .style("fill", "#60df20") 327 .style("fill", "#60df20")
323 .style("opacity", .2) 328 .style("opacity", .2)
324 .on("click", function(d) { 329 .on("click", function(d) {
325 - alert(d.id);  
326 }); 330 });
327 331
328 332
@@ -340,9 +344,11 @@ Example: @@ -340,9 +344,11 @@ Example:
340 .on("mouseout", this.mouseout) 344 .on("mouseout", this.mouseout)
341 .attr("class", function (t) { return t.fixed ? "node fixed" : "node"}) 345 .attr("class", function (t) { return t.fixed ? "node fixed" : "node"})
342 .attr("name", function (t) { return t.name ? t.name.split(" ").join("_").toLowerCase() : ""}) 346 .attr("name", function (t) { return t.name ? t.name.split(" ").join("_").toLowerCase() : ""})
  347 + .attr("id", function (t) { return "g" + t.id;})
343 .append("circle") 348 .append("circle")
344 .on("click", this.active) 349 .on("click", this.active)
345 .attr("id", function(t){ return t.id }) 350 .attr("id", function(t){ return t.id })
  351 + .attr("originalId", function (t) { return t.originalId;})
346 .attr("class", function (t) { return t.fixed ? "" : "drag"}) 352 .attr("class", function (t) { return t.fixed ? "" : "drag"})
347 .attr("r", function (t){ return t.r ? t.r : 15 }) 353 .attr("r", function (t){ return t.r ? t.r : 15 })
348 .attr("style", function (t) { 354 .attr("style", function (t) {
@@ -517,6 +523,29 @@ Example: @@ -517,6 +523,29 @@ Example:
517 //_this.$.dialog.close(); 523 //_this.$.dialog.close();
518 }, 524 },
519 525
  526 + _onNodeSelect : function(e){
  527 + try {
  528 + var nodeId = $("[originalId=" + e.detail.id + "]")[0].id;
  529 + var gNode = $("#g" + nodeId)[0];
  530 + var node = this.graph.nodes[nodeId];
  531 +
  532 + d3.select(gNode).selectAll("circle").transition().duration(600).ease("elastic")
  533 + .attr("r", function (t) {
  534 + return (!t.image) ? 1 == t.fixed ? 1.4 * t.r : t.r + 10 : t.r;
  535 + });
  536 +
  537 + _this.$.dialog.close();
  538 + _this.$.dialog_title.innerHTML = node.name;
  539 + _this.$.dialog_content.innerHTML = node.content;
  540 +
  541 + _this.$.dialog.open();
  542 + }catch(e){}
  543 + },
  544 +
  545 + _onNodeOut : function(e){
  546 + this.mouseout();
  547 + },
  548 +
520 /** 549 /**
521 * It is called after the element’s template has been stamped and all elements inside the element’s local 550 * It is called after the element’s template has been stamped and all elements inside the element’s local
522 * DOM have been configured (with values bound from parents, deserialized attributes, or else default values) 551 * DOM have been configured (with values bound from parents, deserialized attributes, or else default values)
datalets/graph-datalet/graph-with-clustering-extend-datalet.html
  View file @170197f
@@ -171,6 +171,11 @@ Example: @@ -171,6 +171,11 @@ Example:
171 offset :{ 171 offset :{
172 type : Number, 172 type : Number,
173 value : 15 173 value : 15
  174 + },
  175 +
  176 + prevNetwork : {
  177 + type : Object,
  178 + value : undefined
174 } 179 }
175 180
176 /*end test*/ 181 /*end test*/
@@ -178,19 +183,6 @@ Example: @@ -178,19 +183,6 @@ Example:
178 183
179 convexHulls : function() { 184 convexHulls : function() {
180 var hullset = []; 185 var hullset = [];
181 - /*for(var i in _this.groups){  
182 - for(var j=0; j < _this.groups[i].length && _this.groups[i].extend;j++){  
183 - var vertices = [];  
184 - for(var v=0;v < _this.groups[i][j].values.length; v++){  
185 - vertices.push([_this.groups[i][j].values[v].x - _this.offset, _this.groups[i][j].values[v].y - _this.offset]);  
186 - vertices.push([_this.groups[i][j].values[v].x - _this.offset, _this.groups[i][j].values[v].y + _this.offset]);  
187 - vertices.push([_this.groups[i][j].values[v].x + _this.offset, _this.groups[i][j].values[v].y - _this.offset]);  
188 - vertices.push([_this.groups[i][j].values[v].x + _this.offset, _this.groups[i][j].values[v].y + _this.offset]);  
189 - }  
190 -  
191 - hullset.push({id : parseInt(i) + 3, sentiment: j , path: d3.geom.hull(vertices), extend : _this.groups[i][j].extend});  
192 - }  
193 - }*/  
194 for(var n in _this.hulls){ 186 for(var n in _this.hulls){
195 var vertices = []; 187 var vertices = [];
196 for(var v in _this.hulls[n]){ 188 for(var v in _this.hulls[n]){
@@ -199,7 +191,7 @@ Example: @@ -199,7 +191,7 @@ Example:
199 vertices.push([_this.hulls[n][v].x + _this.offset, _this.hulls[n][v].y - _this.offset]); 191 vertices.push([_this.hulls[n][v].x + _this.offset, _this.hulls[n][v].y - _this.offset]);
200 vertices.push([_this.hulls[n][v].x + _this.offset, _this.hulls[n][v].y + _this.offset]); 192 vertices.push([_this.hulls[n][v].x + _this.offset, _this.hulls[n][v].y + _this.offset]);
201 } 193 }
202 - hullset.push({/*id : parseInt(i) + 3,*/ sentiment: _this.hulls[n][v].sentiment , path: d3.geom.hull(vertices), extend : true}); 194 + hullset.push({id : n, sentiment: _this.hulls[n][v].sentiment , path: d3.geom.hull(vertices)});
203 } 195 }
204 return hullset; 196 return hullset;
205 }, 197 },
@@ -243,7 +235,7 @@ Example: @@ -243,7 +235,7 @@ Example:
243 this.groups[f.id][parseInt(this.graph.nodes[i].sentiment) - 1].values.push(this.graph.nodes[i]); 235 this.groups[f.id][parseInt(this.graph.nodes[i].sentiment) - 1].values.push(this.graph.nodes[i]);
244 236
245 }else{ 237 }else{
246 - this.graph.nodes[i].group = -1; 238 + this.graph.nodes[i].group = 0;
247 } 239 }
248 } 240 }
249 }, 241 },
@@ -255,37 +247,44 @@ Example: @@ -255,37 +247,44 @@ Example:
255 //Associate the root to first node 247 //Associate the root to first node
256 var root = ({ 248 var root = ({
257 id: 0, 249 id: 0,
258 - group: -1,  
259 - r: 30, 250 + group: 0,
  251 + name : this.graph.nodes[0].name,
  252 + content : this.graph.nodes[0].content,
  253 + r: this.graph.nodes[0].r,
260 }); 254 });
261 nodes.push(root); 255 nodes.push(root);
262 - nodesMap[-1] = root;  
263 nodesMap[0] = root; 256 nodesMap[0] = root;
264 257
265 this.hulls = []; 258 this.hulls = [];
266 for(var g in this.groups){ 259 for(var g in this.groups){
267 for(var s in this.groups[g]) { 260 for(var s in this.groups[g]) {
268 if(this.groups[g][s].values.length > 0) { 261 if(this.groups[g][s].values.length > 0) {
269 - if(this.groups[g][s].extend){ 262 + if(this.groups[g][s].extend || this.groups[g][s].values.length == 1 ){
270 this.hulls[g + "-" + s] = []; 263 this.hulls[g + "-" + s] = [];
271 for(var n=0; n < this.groups[g][s].values.length;n++) { 264 for(var n=0; n < this.groups[g][s].values.length;n++) {
272 var node = ({ 265 var node = ({
273 id: g + "-" + s + "-" + n, 266 id: g + "-" + s + "-" + n,
274 group: g + "-" + s, 267 group: g + "-" + s,
275 sentiment: parseInt(s) + 1, 268 sentiment: parseInt(s) + 1,
276 - r: 3, 269 + r: this.groups[g][s].values[n].r,
  270 + name : this.groups[g][s].values[n].name,
  271 + content : this.groups[g][s].values[n].content
277 }); 272 });
278 nodes.push(node); 273 nodes.push(node);
279 nodesMap[this.groups[g][s].values[n].id] = node; 274 nodesMap[this.groups[g][s].values[n].id] = node;
280 this.hulls[g + "-" + s].push(node); 275 this.hulls[g + "-" + s].push(node);
281 } 276 }
282 }else{ 277 }else{
  278 + var r = 0;
  279 + for(var n=0; n < this.groups[g][s].values.length;n++) r+= Math.sqrt(this.groups[g][s].values[n].r);
  280 +
283 var node = ({ 281 var node = ({
284 id : g + "-"+ s, 282 id : g + "-"+ s,
285 group: g, 283 group: g,
286 sentiment: parseInt(s) + 1, 284 sentiment: parseInt(s) + 1,
287 nodes: this.groups[g][s].values, 285 nodes: this.groups[g][s].values,
288 - r: this.groups[g][s].values.length * 3, 286 + r: (r < 4) ? 4 : r,
  287 + content : "This node contains " + this.groups[g][s].values.length + " nodes",
289 extend: false 288 extend: false
290 }); 289 });
291 290
@@ -294,8 +293,6 @@ Example: @@ -294,8 +293,6 @@ Example:
294 for(var n=0; n < this.groups[g][s].values.length;n++) 293 for(var n=0; n < this.groups[g][s].values.length;n++)
295 nodesMap[this.groups[g][s].values[n].id] = node; 294 nodesMap[this.groups[g][s].values[n].id] = node;
296 } 295 }
297 -  
298 - //root.r +=(this.groups[g][s].values.length * 3);  
299 } 296 }
300 } 297 }
301 } 298 }
@@ -311,15 +308,12 @@ Example: @@ -311,15 +308,12 @@ Example:
311 id: id, 308 id: id,
312 source: nodesMap[this.graph.links[e].source.id], 309 source: nodesMap[this.graph.links[e].source.id],
313 target: nodesMap[this.graph.links[e].target.id], 310 target: nodesMap[this.graph.links[e].target.id],
314 - value: 120,  
315 size : 1 311 size : 1
316 }); 312 });
317 }else{ 313 }else{
318 links.push({ 314 links.push({
319 - id: id,  
320 - source: nodesMap[this.graph.links[e].source.father.id], 315 + source: nodesMap[this.graph.links[e].source.id],
321 target: nodesMap[this.graph.links[e].target.id], 316 target: nodesMap[this.graph.links[e].target.id],
322 - value: 120,  
323 size : 1 317 size : 1
324 }); 318 });
325 } 319 }
@@ -335,8 +329,6 @@ Example: @@ -335,8 +329,6 @@ Example:
335 if(links[i].id == id) return links[i]; 329 if(links[i].id == id) return links[i];
336 } 330 }
337 return null; 331 return null;
338 -  
339 -  
340 }, 332 },
341 333
342 init : function(){ 334 init : function(){
@@ -362,18 +354,21 @@ Example: @@ -362,18 +354,21 @@ Example:
362 .style("fill", "#60df20") 354 .style("fill", "#60df20")
363 .style("opacity", .2) 355 .style("opacity", .2)
364 .on("click", function(d) { 356 .on("click", function(d) {
365 - alert(d.id); 357 + var gids = d.id.split("-");
  358 + _this.groups[parseInt(gids[0])][parseInt(gids[1])].extend = false;
  359 + _this.init();
366 }); 360 });
367 361
368 362
369 - this.svg.selectAll(".link").data(net.links).remove();  
370 - this.svgLinks = this.svg.selectAll(".link").data(net.links).enter() 363 + this.svg.selectAll(".link").data((this.prevNetwork != undefined) ? this.prevNetwork.links : net.links).remove();
  364 + this.svgLinks = this.svg.selectAll(".link").data(net.links);
  365 + this.svgLinks.enter()
371 .append("line") 366 .append("line")
372 .attr("class", "link") 367 .attr("class", "link")
373 - .attr("style", function(t){ return "stroke:#333"; /*+ t.color*/ }) 368 + .attr("style", function(t){ return "stroke:#999999"; /*+ t.color*/ })
374 .style("stroke-width", function(d) { return d.size || 0.3; }); 369 .style("stroke-width", function(d) { return d.size || 0.3; });
375 370
376 - this.svg.selectAll(".node").data(net.nodes).remove(); 371 + this.svg.selectAll(".node").data((this.prevNetwork != undefined) ? this.prevNetwork.nodes : net.nodes).remove();
377 this.svgNodes = this.svg.selectAll(".node").data(net.nodes).enter() 372 this.svgNodes = this.svg.selectAll(".node").data(net.nodes).enter()
378 .append("g") 373 .append("g")
379 .on("mouseover", this.mouseover) 374 .on("mouseover", this.mouseover)
@@ -410,6 +405,8 @@ Example: @@ -410,6 +405,8 @@ Example:
410 .style("opacity", 1); 405 .style("opacity", 1);
411 406
412 d3.selectAll(".drag").call(force.drag), this.svg.selectAll("g.node").call(this.text); 407 d3.selectAll(".drag").call(force.drag), this.svg.selectAll("g.node").call(this.text);
  408 +
  409 + this.prevNetwork = net;
413 }, 410 },
414 411
415 buildGraph: function (){ 412 buildGraph: function (){
@@ -447,7 +444,7 @@ Example: @@ -447,7 +444,7 @@ Example:
447 .attr("xlink:href","http://icons.iconarchive.com/icons/hopstarter/soft-scraps/256/User-Executive-Green-icon.png"); 444 .attr("xlink:href","http://icons.iconarchive.com/icons/hopstarter/soft-scraps/256/User-Executive-Green-icon.png");
448 445
449 for (var i = 0; i < this.graph.links.length; ++i) { 446 for (var i = 0; i < this.graph.links.length; ++i) {
450 - o = this.graph.links[i]; 447 + var o = this.graph.links[i];
451 o.source = this.graph.nodes[o.source]; 448 o.source = this.graph.nodes[o.source];
452 o.target = this.graph.nodes[o.target]; 449 o.target = this.graph.nodes[o.target];
453 } 450 }
@@ -515,21 +512,30 @@ Example: @@ -515,21 +512,30 @@ Example:
515 }, 512 },
516 513
517 mouseover : function (t) { 514 mouseover : function (t) {
518 - d3.select(this).selectAll("circle").transition().duration(600).ease("elastic").attr("r", function (t) {  
519 - return 1 == t.fixed ? 1.4 * t.r : t.r + 10;  
520 - }); 515 + d3.select(this).selectAll("circle").transition().duration(600).ease("elastic")
  516 + .attr("r", function (t) {
  517 + return (t.extend == undefined) ? t.r + 1 : t.r + 10;
  518 + })
  519 + /*.attr("style", function(t){
  520 + return (t.extend == undefined) ? "fill:#FFFFFF; stroke:" + t.color : "fill:" + t.color + "; stroke:#FFFFFF";
  521 + })*/;
  522 +
521 523
522 _this.$.dialog.close(); 524 _this.$.dialog.close();
523 - _this.$.dialog_title.innerHTML = t.name;  
524 - _this.$.dialog_content.innerHTML = t.nodes ? t.nodes.length : 1; 525 + _this.$.dialog_title.innerHTML = (t.name) ? t.name : "Cluster";
  526 + _this.$.dialog_content.innerHTML = t.content;
525 527
526 _this.$.dialog.open(); 528 _this.$.dialog.open();
527 }, 529 },
528 530
529 mouseout : function () { 531 mouseout : function () {
530 - d3.select(this).selectAll("text").style("visibility", "hidden"), d3.select(this).selectAll("circle").transition().duration(400).attr("r", function (t) {  
531 - return t.r ? t.r : 15  
532 - }); 532 + d3.select(this).selectAll("text").style("visibility", "hidden"), d3.select(this).selectAll("circle").transition().duration(400)
  533 + .attr("r", function (t) {
  534 + return t.r ? t.r : 15
  535 + })
  536 + /*.attr("style", function(t){
  537 + return (t.extend == undefined) ? "stroke:#FFFFFF; fill:" + t.color : "stroke:#FFFFFF; fill:" + t.color;
  538 + })*/;
533 _this.$.dialog.close(); 539 _this.$.dialog.close();
534 }, 540 },
535 541
@@ -541,15 +547,15 @@ Example: @@ -541,15 +547,15 @@ Example:
541 _this.fire('graph-datalet_node-clicked', {node : t}); 547 _this.fire('graph-datalet_node-clicked', {node : t});
542 548
543 if(_this.prev_selected_node != null){ 549 if(_this.prev_selected_node != null){
544 - _this.prev_selected_node.style.fill = _this.prev_selected_node.style.stroke; 550 + _this.prev_selected_node.style.fill = _this.prev_selected_node.color;
545 _this.prev_selected_node.style.stroke = "#FFFFFF"; 551 _this.prev_selected_node.style.stroke = "#FFFFFF";
546 } 552 }
547 553
548 _this.prev_selected_node = document.getElementById("" + t.id); 554 _this.prev_selected_node = document.getElementById("" + t.id);
549 - _this.prev_selected_node.style.fill = "#FFFFFF" 555 + _this.prev_selected_node.style.fill = "#FFFFFF";
550 _this.prev_selected_node.style.stroke = t.color; 556 _this.prev_selected_node.style.stroke = t.color;
551 }else{ 557 }else{
552 - var gids = t.id.split("-"); 558 + var gids = t.id.split("-");
553 _this.groups[gids[0]][gids[1]].extend = true; 559 _this.groups[gids[0]][gids[1]].extend = true;
554 _this.init(); 560 _this.init();
555 } 561 }