Commit 559b8d49b3dbbc112ed0066840fca965d314f7aa
1 parent
cc7592d4
graphs updates
Showing
2 changed files
with
71 additions
and
68 deletions
datalets/graph-datalet/graph-datalet.html
| @@ -166,37 +166,25 @@ Example: | @@ -166,37 +166,25 @@ Example: | ||
| 166 | .attr("width", width) | 166 | .attr("width", width) |
| 167 | .attr("height", height); | 167 | .attr("height", height); |
| 168 | 168 | ||
| 169 | + | ||
| 170 | + var graph = {}; | ||
| 171 | + | ||
| 172 | + graph.nodes = t.nodes; | ||
| 173 | + graph.links = t.links; | ||
| 174 | + | ||
| 169 | //pezzotto | 175 | //pezzotto |
| 170 | - this.svg.append("filter") | ||
| 171 | - .attr("id","filter1") | 176 | + for(var i =0; i < graph.nodes.length; i++){ |
| 177 | + this.svg.append("filter" ) | ||
| 178 | + .attr("id","filter_" + graph.nodes[i].id) | ||
| 172 | .attr("x","0%") | 179 | .attr("x","0%") |
| 173 | .attr("y","0%") | 180 | .attr("y","0%") |
| 174 | .attr("width","100%") | 181 | .attr("width","100%") |
| 175 | .attr("height","100%") | 182 | .attr("height","100%") |
| 176 | - .append("feImage") | ||
| 177 | - .attr("xlink:href","http://icons.iconarchive.com/icons/hopstarter/soft-scraps/256/User-Executive-Green-icon.png"); | ||
| 178 | - | ||
| 179 | - /*this.svg.append("defs") | ||
| 180 | - .append("pattern") | ||
| 181 | - .attr("id","urlimage") | ||
| 182 | - //.attr("patternUnits","userSpaceOnUse") | ||
| 183 | - .attr("width","100%") | ||
| 184 | - .attr("height","100%") | ||
| 185 | - .append("image") | ||
| 186 | - .attr("xlink:href","http://lorempixel.com/400/200") | ||
| 187 | - //.attr("patternUnits","userSpaceOnUse") | ||
| 188 | - .attr("x","0%") | ||
| 189 | - .attr("y","0%") | ||
| 190 | - .attr("width","100%") | ||
| 191 | - .attr("height","100%");*/ | 183 | + .append("feImage") |
| 184 | + .attr("xlink:href", graph.nodes[i].image); | ||
| 185 | + } | ||
| 192 | //end pezzotto | 186 | //end pezzotto |
| 193 | 187 | ||
| 194 | - | ||
| 195 | - var graph = {}; | ||
| 196 | - | ||
| 197 | - graph.nodes = t.nodes; | ||
| 198 | - graph.links = t.links; | ||
| 199 | - | ||
| 200 | force = d3.layout.force().nodes(graph.nodes).links(graph.links).size([this.width, this.height]).charge(-1e3).friction(.7).linkDistance(function (t) | 188 | force = d3.layout.force().nodes(graph.nodes).links(graph.links).size([this.width, this.height]).charge(-1e3).friction(.7).linkDistance(function (t) |
| 201 | { | 189 | { |
| 202 | return t.value ? t.value : 80 | 190 | return t.value ? t.value : 80 |
| @@ -204,11 +192,13 @@ Example: | @@ -204,11 +192,13 @@ Example: | ||
| 204 | 192 | ||
| 205 | glinks = this.svg.selectAll(".link").data(graph.links).enter().append("line").attr("class", "link"); | 193 | glinks = this.svg.selectAll(".link").data(graph.links).enter().append("line").attr("class", "link"); |
| 206 | 194 | ||
| 207 | - this.svg.selectAll(".link").attr("style", function(t){ | ||
| 208 | - return "stroke:" + t.color | ||
| 209 | - }).attr("style", function(t){ | ||
| 210 | - return "stroke-width:" + (t.size ? t.size : 1.0) + "px"; | ||
| 211 | - }); | 195 | + this.svg.selectAll(".link") |
| 196 | + .attr("style", function(t){ | ||
| 197 | + return "stroke:" + t.color | ||
| 198 | + }) | ||
| 199 | + .attr("style", function(t){ | ||
| 200 | + return "stroke-width:" + (t.size ? t.size : 1.0) + "px"; | ||
| 201 | + }); | ||
| 212 | 202 | ||
| 213 | gnodes = this.svg.selectAll(".node").data(graph.nodes).enter().append("g").attr("class", function (t) { | 203 | gnodes = this.svg.selectAll(".node").data(graph.nodes).enter().append("g").attr("class", function (t) { |
| 214 | return t.fixed ? "node fixed" : "node" | 204 | return t.fixed ? "node fixed" : "node" |
| @@ -227,13 +217,24 @@ Example: | @@ -227,13 +217,24 @@ Example: | ||
| 227 | return t.r ? t.r : 15 | 217 | return t.r ? t.r : 15 |
| 228 | }) | 218 | }) |
| 229 | .attr("style", function (t) { | 219 | .attr("style", function (t) { |
| 230 | - return t.color ? "fill:" + t.color : !1 + "; stroke:white" | 220 | + switch(parseInt(t.sentiment)){ |
| 221 | + case 1 : | ||
| 222 | + t.color = "#1F77B4"; | ||
| 223 | + break; | ||
| 224 | + case 2 : | ||
| 225 | + t.color = "#2CA02C"; | ||
| 226 | + break; | ||
| 227 | + case 3: | ||
| 228 | + t.color = "#D62728"; | ||
| 229 | + break; | ||
| 230 | + default: | ||
| 231 | + t.color = "#333"; | ||
| 232 | + } | ||
| 233 | + //return t.color ? "fill:" + t.color : !1 + "; stroke:white" | ||
| 234 | + return "fill:" + t.color + "; stroke:white" | ||
| 231 | }); | 235 | }); |
| 232 | 236 | ||
| 233 | - d3.selectAll('circle').attr("filter", function(t){return t.image ? 'url(#filter1)' : ""}) | ||
| 234 | - .selectAll('feImage') | ||
| 235 | - .attr("xlink:href", function(t){ | ||
| 236 | - return t.image ? t.image : "http://icons.iconarchive.com/icons/hopstarter/soft-scraps/256/User-Executive-Green-icon.png"}); | 237 | + d3.selectAll('circle').attr("filter", function(t){return t.image ? 'url(#filter_' + t.id +')' : ""}); |
| 237 | 238 | ||
| 238 | //d3.selectAll(".drag").call(force.drag), svg.selectAll("g.fixed").call(text); | 239 | //d3.selectAll(".drag").call(force.drag), svg.selectAll("g.fixed").call(text); |
| 239 | d3.selectAll(".drag").call(force.drag), this.svg.selectAll("g.node").call(this.text); | 240 | d3.selectAll(".drag").call(force.drag), this.svg.selectAll("g.node").call(this.text); |
datalets/graph-datalet/graph-with-clustering-datalet.html
| @@ -432,42 +432,44 @@ Example: | @@ -432,42 +432,44 @@ Example: | ||
| 432 | }, | 432 | }, |
| 433 | 433 | ||
| 434 | tick : function () { | 434 | tick : function () { |
| 435 | + if(_this.hull != undefined) { | ||
| 436 | + if (!_this.hull.empty()) { | ||
| 437 | + _this.hull.data(_this.convexHulls) | ||
| 438 | + .style("fill", function (d) { | ||
| 439 | + return _this.fill(d.sentiment); | ||
| 440 | + }) | ||
| 441 | + .attr("d", _this.drawCluster); | ||
| 442 | + } | ||
| 435 | 443 | ||
| 436 | - if (!_this.hull.empty()) { | ||
| 437 | - _this.hull.data(_this.convexHulls) | ||
| 438 | - .style("fill", function(d) { | ||
| 439 | - return _this.fill(d.sentiment); | ||
| 440 | - }) | ||
| 441 | - .attr("d", _this.drawCluster); | ||
| 442 | - } | ||
| 443 | - | ||
| 444 | - d3.selectAll("g foreignObject").attr("x", function (t) { | ||
| 445 | - return t.x + (t.r ? 0.8 * t.r : 15) | ||
| 446 | - }).attr("y", function (t) { | ||
| 447 | - return t.y - 20 | ||
| 448 | - }); | ||
| 449 | - | ||
| 450 | - d3.selectAll("#logo text").attr("x", function (t) { | ||
| 451 | - return t.x + .7 * (t.r ? t.r : 15) | ||
| 452 | - }).attr("y", function (t) { | ||
| 453 | - return t.y | ||
| 454 | - }); | ||
| 455 | - | ||
| 456 | - _this.svgNodes.attr("cx", function (t) { | ||
| 457 | - return t.x = Math.max(25, Math.min(_this.width - 50, t.x)) | ||
| 458 | - }).attr("cy", function (t) { | ||
| 459 | - return t.y = Math.max(8, Math.min(600, t.y)) | ||
| 460 | - }); | ||
| 461 | 444 | ||
| 462 | - _this.svgLinks.attr("x1", function (t) { | ||
| 463 | - return t.source.x | ||
| 464 | - }).attr("y1", function (t) { | ||
| 465 | - return t.source.y | ||
| 466 | - }).attr("x2", function (t) { | ||
| 467 | - return t.target.x | ||
| 468 | - }).attr("y2", function (t) { | ||
| 469 | - return t.target.y | ||
| 470 | - }); | 445 | + d3.selectAll("g foreignObject").attr("x", function (t) { |
| 446 | + return t.x + (t.r ? 0.8 * t.r : 15) | ||
| 447 | + }).attr("y", function (t) { | ||
| 448 | + return t.y - 20 | ||
| 449 | + }); | ||
| 450 | + | ||
| 451 | + d3.selectAll("#logo text").attr("x", function (t) { | ||
| 452 | + return t.x + .7 * (t.r ? t.r : 15) | ||
| 453 | + }).attr("y", function (t) { | ||
| 454 | + return t.y | ||
| 455 | + }); | ||
| 456 | + | ||
| 457 | + _this.svgNodes.attr("cx", function (t) { | ||
| 458 | + return t.x = Math.max(25, Math.min(_this.width - 50, t.x)) | ||
| 459 | + }).attr("cy", function (t) { | ||
| 460 | + return t.y = Math.max(8, Math.min(600, t.y)) | ||
| 461 | + }); | ||
| 462 | + | ||
| 463 | + _this.svgLinks.attr("x1", function (t) { | ||
| 464 | + return t.source.x | ||
| 465 | + }).attr("y1", function (t) { | ||
| 466 | + return t.source.y | ||
| 467 | + }).attr("x2", function (t) { | ||
| 468 | + return t.target.x | ||
| 469 | + }).attr("y2", function (t) { | ||
| 470 | + return t.target.y | ||
| 471 | + }); | ||
| 472 | + } | ||
| 471 | 473 | ||
| 472 | }, | 474 | }, |
| 473 | 475 |