Commit ff209db7356f4a943e2f6f77d79e531e2a34dcdd
1 parent
89ddd164
graph updates
Showing
1 changed file
with
15 additions
and
14 deletions
datalets/graph-datalet/graph-datalet.html
| @@ -154,7 +154,7 @@ Example: | @@ -154,7 +154,7 @@ Example: | ||
| 154 | } | 154 | } |
| 155 | }, | 155 | }, |
| 156 | 156 | ||
| 157 | - buildGraph: function (t){ | 157 | + buildGraph: function (){ |
| 158 | 158 | ||
| 159 | this.svg = this.svg.append("g") | 159 | this.svg = this.svg.append("g") |
| 160 | .call(d3.behavior.zoom().scaleExtent([.25, 20]).on("zoom", this.zoom)) | 160 | .call(d3.behavior.zoom().scaleExtent([.25, 20]).on("zoom", this.zoom)) |
| @@ -180,16 +180,16 @@ Example: | @@ -180,16 +180,16 @@ Example: | ||
| 180 | .attr("height", this.height); | 180 | .attr("height", this.height); |
| 181 | 181 | ||
| 182 | 182 | ||
| 183 | - var graph = {}; | 183 | + /* var graph = {}; |
| 184 | 184 | ||
| 185 | graph.nodes = t.nodes; | 185 | graph.nodes = t.nodes; |
| 186 | - graph.links = t.links; | 186 | + graph.links = t.links;*/ |
| 187 | 187 | ||
| 188 | //pezzotto | 188 | //pezzotto |
| 189 | - for(var i =0; i < graph.nodes.length; i++){ | 189 | + for(var i =0; i < this.graph.nodes.length; i++){ |
| 190 | this.svg.append("defs") | 190 | this.svg.append("defs") |
| 191 | .append("pattern") | 191 | .append("pattern") |
| 192 | - .attr("id","image_" + graph.nodes[i].id) | 192 | + .attr("id","image_" + this.graph.nodes[i].id) |
| 193 | .attr("patternUnits","objectBoundingBox") | 193 | .attr("patternUnits","objectBoundingBox") |
| 194 | .attr("height","40") | 194 | .attr("height","40") |
| 195 | .attr("width","40") | 195 | .attr("width","40") |
| @@ -198,16 +198,16 @@ Example: | @@ -198,16 +198,16 @@ Example: | ||
| 198 | .attr("y","0") | 198 | .attr("y","0") |
| 199 | .attr("height","30") | 199 | .attr("height","30") |
| 200 | .attr("width","30") | 200 | .attr("width","30") |
| 201 | - .attr("xlink:href", graph.nodes[i].image); | 201 | + .attr("xlink:href", this.graph.nodes[i].image); |
| 202 | } | 202 | } |
| 203 | //end pezzotto | 203 | //end pezzotto |
| 204 | 204 | ||
| 205 | - force = d3.layout.force().nodes(graph.nodes).links(graph.links).size([this.width, this.height]).charge(-1e3).friction(.7).linkDistance(function (t) | 205 | + force = d3.layout.force().nodes(this.graph.nodes).links(this.graph.links).size([this.width, this.height]).charge(-1e3).friction(.7).linkDistance(function (t) |
| 206 | { | 206 | { |
| 207 | return t.value ? t.value : 80 | 207 | return t.value ? t.value : 80 |
| 208 | }).on("tick", this.tick).start(); | 208 | }).on("tick", this.tick).start(); |
| 209 | 209 | ||
| 210 | - this.glinks = this.svg.selectAll(".link").data(graph.links).enter().append("line").attr("class", "link"); | 210 | + this.glinks = this.svg.selectAll(".link").data(this.graph.links).enter().append("line").attr("class", "link"); |
| 211 | 211 | ||
| 212 | this.svg.selectAll(".link") | 212 | this.svg.selectAll(".link") |
| 213 | .attr("style", function(t){ | 213 | .attr("style", function(t){ |
| @@ -217,7 +217,7 @@ Example: | @@ -217,7 +217,7 @@ Example: | ||
| 217 | return "stroke-width:" + (t.size ? t.size : 1.0) + "px"; | 217 | return "stroke-width:" + (t.size ? t.size : 1.0) + "px"; |
| 218 | }); | 218 | }); |
| 219 | 219 | ||
| 220 | - this.gnodes = this.svg.selectAll(".node").data(graph.nodes).enter().append("g") | 220 | + this.gnodes = this.svg.selectAll(".node").data(this.graph.nodes).enter().append("g") |
| 221 | .attr("class", function (t) { return t.fixed ? "node fixed" : "node"}) | 221 | .attr("class", function (t) { return t.fixed ? "node fixed" : "node"}) |
| 222 | .attr("id", function (t) { return "g" + t.id;}) | 222 | .attr("id", function (t) { return "g" + t.id;}) |
| 223 | .attr("name", function (t) { return t.name ? t.name.split(" ").join("_").toLowerCase() : ""}) | 223 | .attr("name", function (t) { return t.name ? t.name.split(" ").join("_").toLowerCase() : ""}) |
| @@ -270,7 +270,7 @@ Example: | @@ -270,7 +270,7 @@ Example: | ||
| 270 | }, | 270 | }, |
| 271 | 271 | ||
| 272 | tick : function () { | 272 | tick : function () { |
| 273 | - if(_this.gnodes != undefined) | 273 | + if(_this.gnodes != undefined && _this.graph.nodes.length > 0) |
| 274 | { | 274 | { |
| 275 | d3.selectAll("g foreignObject").attr("x", function (t) { | 275 | d3.selectAll("g foreignObject").attr("x", function (t) { |
| 276 | return t.x + (t.r ? 0.8 * t.r : 15) | 276 | return t.x + (t.r ? 0.8 * t.r : 15) |
| @@ -396,10 +396,11 @@ Example: | @@ -396,10 +396,11 @@ Example: | ||
| 396 | .attr("style", "transform:translate(0px)") | 396 | .attr("style", "transform:translate(0px)") |
| 397 | .style("position", "absolute"); | 397 | .style("position", "absolute"); |
| 398 | 398 | ||
| 399 | - var g = this.graph; | ||
| 400 | - g.nodes[0].x = this.width / 2; | ||
| 401 | - g.nodes[0].y = this.height / 8; | ||
| 402 | - this.buildGraph(g); | 399 | + if(this.graph.nodes.length > 0){ |
| 400 | + this.graph.nodes[0].x = this.width / 2; | ||
| 401 | + this.graph.nodes[0].y = this.height / 8; | ||
| 402 | + this.buildGraph(); | ||
| 403 | + } | ||
| 403 | } | 404 | } |
| 404 | }); | 405 | }); |
| 405 | </script> | 406 | </script> |