Commit 9e08623999498d33ab425dba618a9552a8c95669
1 parent
b4fdbae2
graph datalet updtaes
Showing
6 changed files
with
25 additions
and
2 deletions
controllets/animated-grid-controllet/animated-grid-controllet.html
100644 → 100755
controllets/fullsize-page-with-card-controllet/fullsize-page-with-card-controllet.html
100644 → 100755
datalets/base-datalet/static/images/spin.svg
100644 → 100755
datalets/graph-datalet/graph-datalet.html
100644 → 100755
| @@ -130,6 +130,21 @@ Example: | @@ -130,6 +130,21 @@ Example: | ||
| 130 | .attr("width", width) | 130 | .attr("width", width) |
| 131 | .attr("height", height); | 131 | .attr("height", height); |
| 132 | 132 | ||
| 133 | + this.svg.append("defs") | ||
| 134 | + .append("pattern") | ||
| 135 | + .attr("id","urlimage") | ||
| 136 | + .attr("patternUnits","userSpaceOnUse") | ||
| 137 | + .attr("width","320") | ||
| 138 | + .attr("height","320") | ||
| 139 | + .append("image") | ||
| 140 | + .attr("xlink:href","http://lorempixel.com/400/200") | ||
| 141 | + .attr("patternUnits","userSpaceOnUse") | ||
| 142 | + .attr("x","0") | ||
| 143 | + .attr("y","0") | ||
| 144 | + .attr("width","400") | ||
| 145 | + .attr("height","200"); | ||
| 146 | + | ||
| 147 | + | ||
| 133 | var graph = {}; | 148 | var graph = {}; |
| 134 | 149 | ||
| 135 | graph.nodes = t.nodes; | 150 | graph.nodes = t.nodes; |
| @@ -157,10 +172,18 @@ Example: | @@ -157,10 +172,18 @@ Example: | ||
| 157 | return t.fixed ? "" : "drag" | 172 | return t.fixed ? "" : "drag" |
| 158 | }).attr("r", function (t) { | 173 | }).attr("r", function (t) { |
| 159 | return t.r ? t.r : 15 | 174 | return t.r ? t.r : 15 |
| 160 | - }).attr("style", function (t) { | 175 | + }) |
| 176 | + .attr("style", function (t) { | ||
| 161 | return t.color ? "stroke:" + t.color : !1 | 177 | return t.color ? "stroke:" + t.color : !1 |
| 162 | }); | 178 | }); |
| 163 | 179 | ||
| 180 | + d3.selectAll('circle').style("fill", function(t){return t.image ? 'url(#urlimage)' : ""})/*.append("svg:image") | ||
| 181 | + .attr('xlink:href', function(t){ | ||
| 182 | + return t.image ? t.image : ""; | ||
| 183 | + }) | ||
| 184 | + .attr('width', 150) | ||
| 185 | + .attr('height', 200);*/ | ||
| 186 | + | ||
| 164 | //d3.selectAll(".drag").call(force.drag), svg.selectAll("g.fixed").call(text); | 187 | //d3.selectAll(".drag").call(force.drag), svg.selectAll("g.fixed").call(text); |
| 165 | d3.selectAll(".drag").call(force.drag), this.svg.selectAll("g.node").call(this.text); | 188 | d3.selectAll(".drag").call(force.drag), this.svg.selectAll("g.node").call(this.text); |
| 166 | 189 | ||
| @@ -217,7 +240,7 @@ Example: | @@ -217,7 +240,7 @@ Example: | ||
| 217 | mouseover : function (t) { | 240 | mouseover : function (t) { |
| 218 | d3.select(this).selectAll("circle").transition().duration(600).ease("elastic").attr("r", function (t) { | 241 | d3.select(this).selectAll("circle").transition().duration(600).ease("elastic").attr("r", function (t) { |
| 219 | //return 1 == t.fixed ? 1.4 * t.r : 15 | 242 | //return 1 == t.fixed ? 1.4 * t.r : 15 |
| 220 | - return 1 == t.fixed ? 1.4 * t.r : 15 | 243 | + return 1 == t.fixed ? 1.4 * t.r : t.r + 10; |
| 221 | }); | 244 | }); |
| 222 | 245 | ||
| 223 | }, | 246 | }, |
datalets/graph-datalet/static/css/graphStyle.css
100644 → 100755
datalets/graph-datalet/static/js/d3.v3.js
100644 → 100755