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 | 166 | .attr("width", width) |
| 167 | 167 | .attr("height", height); |
| 168 | 168 | |
| 169 | + | |
| 170 | + var graph = {}; | |
| 171 | + | |
| 172 | + graph.nodes = t.nodes; | |
| 173 | + graph.links = t.links; | |
| 174 | + | |
| 169 | 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 | 179 | .attr("x","0%") |
| 173 | 180 | .attr("y","0%") |
| 174 | 181 | .attr("width","100%") |
| 175 | 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 | 186 | //end pezzotto |
| 193 | 187 | |
| 194 | - | |
| 195 | - var graph = {}; | |
| 196 | - | |
| 197 | - graph.nodes = t.nodes; | |
| 198 | - graph.links = t.links; | |
| 199 | - | |
| 200 | 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 | 190 | return t.value ? t.value : 80 |
| ... | ... | @@ -204,11 +192,13 @@ Example: |
| 204 | 192 | |
| 205 | 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 | 203 | gnodes = this.svg.selectAll(".node").data(graph.nodes).enter().append("g").attr("class", function (t) { |
| 214 | 204 | return t.fixed ? "node fixed" : "node" |
| ... | ... | @@ -227,13 +217,24 @@ Example: |
| 227 | 217 | return t.r ? t.r : 15 |
| 228 | 218 | }) |
| 229 | 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 | 239 | //d3.selectAll(".drag").call(force.drag), svg.selectAll("g.fixed").call(text); |
| 239 | 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 | 432 | }, |
| 433 | 433 | |
| 434 | 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 | ... | ... |