WebCompDev / COMPONENTS

Commit d0393f14363b2f80f251ab6b936f8fb9e8016280

Authored by Luigi Serra
1 parent 55ba476b

graphs updates

Inline Side-by-side
Showing 4 changed files with 190 additions and 144 deletions
datalets/graph-datalet/demo/demo-clustering.html
  View file @d0393f1
... ... @@ -15,7 +15,7 @@
15 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 19 xhttp.send();
20 20 }
21 21  
... ...
datalets/graph-datalet/graph-datalet.html
  View file @d0393f1
... ... @@ -96,18 +96,16 @@ Example:
96 96  
97 97 <script>
98 98  
99   - gnodes = [];
100   - glinks = [];
101   -
102   - width = undefined;
103   - height = undefined;
104   - svg = undefined;
105 99 _this = null;
106   - prev_selected_node = null;
107 100  
108 101 Polymer({
109 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 109 properties: {
112 110 /**
113 111 * It's the url for the preview
... ... @@ -116,11 +114,21 @@ Example:
116 114 * @type Strig
117 115 * @default ''
118 116 */
119   - data : {
  117 + graph : {
120 118 type : Object,
121 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 132 width: {
125 133 type: Number,
126 134 value: undefined
... ... @@ -128,7 +136,7 @@ Example:
128 136  
129 137 height : {
130 138 type : Number,
131   - type: undefined
  139 + value: undefined
132 140 },
133 141  
134 142 svg: {
... ... @@ -138,6 +146,11 @@ Example:
138 146 feelings:{
139 147 type: Array,
140 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 161 .append("g");
149 162  
150 163 //set initial zoom
151   - scale = (1.0);
  164 + var scale = (1.0);
152 165 //translate = [(width-scale*width)/2, ((height-scale*height)/4)];
153   - translate = [100, 100];
  166 + var translate = [100, 100];
154 167 this.svg.transition()
155 168 .duration(750)
156 169 .attr("transform", "translate(" + translate + ")scale(" + scale + ")")
... ... @@ -163,8 +176,8 @@ Example:
163 176  
164 177 this.svg.append("rect")
165 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 183 var graph = {};
... ... @@ -174,15 +187,6 @@ Example:
174 187  
175 188 //pezzotto
176 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 190 this.svg.append("defs")
187 191 .append("pattern")
188 192 .attr("id","image_" + graph.nodes[i].id)
... ... @@ -203,7 +207,7 @@ Example:
203 207 return t.value ? t.value : 80
204 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 212 this.svg.selectAll(".link")
209 213 .attr("style", function(t){
... ... @@ -213,24 +217,18 @@ Example:
213 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 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 232 .attr("style", function (t) {
235 233 switch(parseInt(t.sentiment)){
236 234 case 1 :
... ... @@ -248,19 +246,16 @@ Example:
248 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 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 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 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 261 text: function (t)
... ... @@ -275,35 +270,37 @@ Example:
275 270 },
276 271  
277 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 305 mouseover : function (t) {
309 306 d3.select(this).selectAll("circle").transition().duration(600).ease("elastic")
... ... @@ -332,14 +329,14 @@ Example:
332 329  
333 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 341 /* _this.$.dialog.close();
345 342 _this.$.dialog_title.innerHTML = t.name;
... ... @@ -352,6 +349,30 @@ Example:
352 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 377 * It is called after the element’s template has been stamped and all elements inside the element’s local
357 378 * DOM have been configured (with values bound from parents, deserialized attributes, or else default values)
... ... @@ -366,26 +387,16 @@ Example:
366 387  
367 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 391 this.svg = d3.select("svg#sbiricuda").attr("class", "svg").attr({
378 392 width: "100%",
379 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 400 g.nodes[0].x = this.width / 2;
390 401 g.nodes[0].y = this.height / 8;
391 402 this.buildGraph(g);
... ...
datalets/graph-datalet/graph-with-clustering-datalet.html
  View file @d0393f1
... ... @@ -97,6 +97,11 @@ Example:
97 97 Polymer({
98 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 105 properties: {
101 106 /**
102 107 * It's the url for the preview
... ... @@ -138,6 +143,7 @@ Example:
138 143 type: Array,
139 144 values: ["Agree", "Neutral", "Not agree"]
140 145 },
  146 +
141 147 prev_selected_node : {
142 148 type : Object,
143 149 value : null
... ... @@ -200,11 +206,11 @@ Example:
200 206 return fill(d);*/
201 207 switch((d % 3)){
202 208 case 0 :
203   - return "#1F77B4";
  209 + return "transparent";//"#1F77B4";//neutral
204 210 case 1 :
205   - return "#2CA02C";
  211 + return "#2CA02C";//agree
206 212 case 2:
207   - return "#FF1E1E";
  213 + return "transparent";//"#FF1E1E";//disagree
208 214 }
209 215 },
210 216  
... ... @@ -277,7 +283,6 @@ Example:
277 283  
278 284 for(var n=0; n < this.groups[g][s].values.length;n++)
279 285 nodesMap[this.groups[g][s].values[n].id] = node;
280   -
281 286 }
282 287 }
283 288 }
... ... @@ -322,7 +327,6 @@ Example:
322 327 .style("fill", "#60df20")
323 328 .style("opacity", .2)
324 329 .on("click", function(d) {
325   - alert(d.id);
326 330 });
327 331  
328 332  
... ... @@ -340,9 +344,11 @@ Example:
340 344 .on("mouseout", this.mouseout)
341 345 .attr("class", function (t) { return t.fixed ? "node fixed" : "node"})
342 346 .attr("name", function (t) { return t.name ? t.name.split(" ").join("_").toLowerCase() : ""})
  347 + .attr("id", function (t) { return "g" + t.id;})
343 348 .append("circle")
344 349 .on("click", this.active)
345 350 .attr("id", function(t){ return t.id })
  351 + .attr("originalId", function (t) { return t.originalId;})
346 352 .attr("class", function (t) { return t.fixed ? "" : "drag"})
347 353 .attr("r", function (t){ return t.r ? t.r : 15 })
348 354 .attr("style", function (t) {
... ... @@ -517,6 +523,29 @@ Example:
517 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 550 * It is called after the element’s template has been stamped and all elements inside the element’s local
522 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 @d0393f1
... ... @@ -171,6 +171,11 @@ Example:
171 171 offset :{
172 172 type : Number,
173 173 value : 15
  174 + },
  175 +
  176 + prevNetwork : {
  177 + type : Object,
  178 + value : undefined
174 179 }
175 180  
176 181 /*end test*/
... ... @@ -178,19 +183,6 @@ Example:
178 183  
179 184 convexHulls : function() {
180 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 186 for(var n in _this.hulls){
195 187 var vertices = [];
196 188 for(var v in _this.hulls[n]){
... ... @@ -199,7 +191,7 @@ Example:
199 191 vertices.push([_this.hulls[n][v].x + _this.offset, _this.hulls[n][v].y - _this.offset]);
200 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 196 return hullset;
205 197 },
... ... @@ -243,7 +235,7 @@ Example:
243 235 this.groups[f.id][parseInt(this.graph.nodes[i].sentiment) - 1].values.push(this.graph.nodes[i]);
244 236  
245 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 247 //Associate the root to first node
256 248 var root = ({
257 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 255 nodes.push(root);
262   - nodesMap[-1] = root;
263 256 nodesMap[0] = root;
264 257  
265 258 this.hulls = [];
266 259 for(var g in this.groups){
267 260 for(var s in this.groups[g]) {
268 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 263 this.hulls[g + "-" + s] = [];
271 264 for(var n=0; n < this.groups[g][s].values.length;n++) {
272 265 var node = ({
273 266 id: g + "-" + s + "-" + n,
274 267 group: g + "-" + s,
275 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 273 nodes.push(node);
279 274 nodesMap[this.groups[g][s].values[n].id] = node;
280 275 this.hulls[g + "-" + s].push(node);
281 276 }
282 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 281 var node = ({
284 282 id : g + "-"+ s,
285 283 group: g,
286 284 sentiment: parseInt(s) + 1,
287 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 288 extend: false
290 289 });
291 290  
... ... @@ -294,8 +293,6 @@ Example:
294 293 for(var n=0; n < this.groups[g][s].values.length;n++)
295 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 308 id: id,
312 309 source: nodesMap[this.graph.links[e].source.id],
313 310 target: nodesMap[this.graph.links[e].target.id],
314   - value: 120,
315 311 size : 1
316 312 });
317 313 }else{
318 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 316 target: nodesMap[this.graph.links[e].target.id],
322   - value: 120,
323 317 size : 1
324 318 });
325 319 }
... ... @@ -335,8 +329,6 @@ Example:
335 329 if(links[i].id == id) return links[i];
336 330 }
337 331 return null;
338   -
339   -
340 332 },
341 333  
342 334 init : function(){
... ... @@ -362,18 +354,21 @@ Example:
362 354 .style("fill", "#60df20")
363 355 .style("opacity", .2)
364 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 366 .append("line")
372 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 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 372 this.svgNodes = this.svg.selectAll(".node").data(net.nodes).enter()
378 373 .append("g")
379 374 .on("mouseover", this.mouseover)
... ... @@ -410,6 +405,8 @@ Example:
410 405 .style("opacity", 1);
411 406  
412 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 412 buildGraph: function (){
... ... @@ -447,7 +444,7 @@ Example:
447 444 .attr("xlink:href","http://icons.iconarchive.com/icons/hopstarter/soft-scraps/256/User-Executive-Green-icon.png");
448 445  
449 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 448 o.source = this.graph.nodes[o.source];
452 449 o.target = this.graph.nodes[o.target];
453 450 }
... ... @@ -515,21 +512,30 @@ Example:
515 512 },
516 513  
517 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 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 528 _this.$.dialog.open();
527 529 },
528 530  
529 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 539 _this.$.dialog.close();
534 540 },
535 541  
... ... @@ -541,15 +547,15 @@ Example:
541 547 _this.fire('graph-datalet_node-clicked', {node : t});
542 548  
543 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 551 _this.prev_selected_node.style.stroke = "#FFFFFF";
546 552 }
547 553  
548 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 556 _this.prev_selected_node.style.stroke = t.color;
551 557 }else{
552   - var gids = t.id.split("-");
  558 + var gids = t.id.split("-");
553 559 _this.groups[gids[0]][gids[1]].extend = true;
554 560 _this.init();
555 561 }
... ...