WebCompDev / COMPONENTS

Commit 1aced18e3a6046a5ba0d70387eff3027d12cf004

Authored by Luigi Serra
1 parent 00a00f3d

graph uploads

Inline Side-by-side
Showing 1 changed file with 28 additions and 22 deletions
datalets/graph-datalet/graph-datalet.html
  View file @1aced18
... ... @@ -150,7 +150,7 @@ Example:
150 150 //set initial zoom
151 151 scale = (1.0);
152 152 //translate = [(width-scale*width)/2, ((height-scale*height)/4)];
153   - translate = [0, 0];
  153 + translate = [100, 100];
154 154 this.svg.transition()
155 155 .duration(750)
156 156 .attr("transform", "translate(" + translate + ")scale(" + scale + ")")
... ... @@ -174,25 +174,27 @@ Example:
174 174  
175 175 //pezzotto
176 176 for(var i =0; i < graph.nodes.length; i++){
177   - this.svg.append("filter" )
  177 + /*this.svg.append("filter")
178 178 .attr("id","filter_" + graph.nodes[i].id)
179 179 .attr("x","0%")
180 180 .attr("y","0%")
181 181 .attr("width","100%")
182 182 .attr("height","100%")
183 183 .append("feImage")
184   - .attr("xlink:href", graph.nodes[i].image)
185   - /*test*/
186   - .attr("result", "img")
187   - .append("feComposite")
188   - .attr("operator","in")
189   - .attr("in","img")
190   - .attr("in2","SourceGraphic")
191   - .attr("result","clip")
192   - .append("feBlend")
193   - .attr("mode","multiply")
194   - .attr("in","SourceGraphic")
195   - .attr("in2","clip");
  184 + .attr("xlink:href", graph.nodes[i].image);*/
  185 +
  186 + this.svg.append("defs")
  187 + .append("pattern")
  188 + .attr("id","image_" + graph.nodes[i].id)
  189 + .attr("patternUnits","objectBoundingBox")
  190 + .attr("height","40")
  191 + .attr("width","40")
  192 + .append("image")
  193 + .attr("x","0")
  194 + .attr("y","0")
  195 + .attr("height","30")
  196 + .attr("width","30")
  197 + .attr("xlink:href", graph.nodes[i].image);
196 198 }
197 199 //end pezzotto
198 200  
... ... @@ -246,7 +248,9 @@ Example:
246 248 return "fill:" + t.color + "; stroke:white"
247 249 });
248 250  
249   - d3.selectAll('circle').attr("filter", function(t){return t.image ? 'url(#filter_' + t.id +')' : ""});
  251 + //d3.selectAll('circle').attr("filter", function(t){return t.image ? 'url(#filter_' + t.id +')' : ""});
  252 + d3.selectAll('circle').attr("style", function(t){
  253 + return "fill :" + (t.image ? 'url(#image_' + t.id +')' : t.color)});
250 254  
251 255 //d3.selectAll(".drag").call(force.drag), svg.selectAll("g.fixed").call(text);
252 256 d3.selectAll(".drag").call(force.drag), this.svg.selectAll("g.node").call(this.text);
... ... @@ -302,10 +306,10 @@ Example:
302 306 })
303 307 },
304 308 mouseover : function (t) {
305   - d3.select(this).selectAll("circle").transition().duration(600).ease("elastic").attr("r", function (t) {
306   - //return 1 == t.fixed ? 1.4 * t.r : 15
307   - return 1 == t.fixed ? 1.4 * t.r : t.r + 10;
308   - });
  309 + d3.select(this).selectAll("circle").transition().duration(600).ease("elastic")
  310 + .attr("r", function (t) {
  311 + return (!t.image) ? 1 == t.fixed ? 1.4 * t.r : t.r + 10 : t.r;
  312 + });
309 313  
310 314 _this.$.dialog.close();
311 315 _this.$.dialog_title.innerHTML = t.name;
... ... @@ -315,9 +319,11 @@ Example:
315 319 },
316 320  
317 321 mouseout : function () {
318   - d3.select(this).selectAll("text").style("visibility", "hidden"), d3.select(this).selectAll("circle").transition().duration(400).attr("r", function (t) {
319   - return t.r ? t.r : 15
320   - });
  322 + d3.select(this).selectAll("text").style("visibility", "hidden"), d3.select(this).selectAll("circle").transition().duration(400)
  323 + .attr("r", function (t) {
  324 + return t.r ? t.r : 15
  325 + });
  326 +
321 327 _this.$.dialog.close();
322 328 },
323 329  
... ...