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 | 130 | .attr("width", width) |
| 131 | 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 | 148 | var graph = {}; |
| 134 | 149 | |
| 135 | 150 | graph.nodes = t.nodes; |
| ... | ... | @@ -157,10 +172,18 @@ Example: |
| 157 | 172 | return t.fixed ? "" : "drag" |
| 158 | 173 | }).attr("r", function (t) { |
| 159 | 174 | return t.r ? t.r : 15 |
| 160 | - }).attr("style", function (t) { | |
| 175 | + }) | |
| 176 | + .attr("style", function (t) { | |
| 161 | 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 | 187 | //d3.selectAll(".drag").call(force.drag), svg.selectAll("g.fixed").call(text); |
| 165 | 188 | d3.selectAll(".drag").call(force.drag), this.svg.selectAll("g.node").call(this.text); |
| 166 | 189 | |
| ... | ... | @@ -217,7 +240,7 @@ Example: |
| 217 | 240 | mouseover : function (t) { |
| 218 | 241 | d3.select(this).selectAll("circle").transition().duration(600).ease("elastic").attr("r", function (t) { |
| 219 | 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