Commit 01a6d2e57c0586b430fc3c8218a9341ba4d3a637
1 parent
8a1473fe
graph updates
Showing
2 changed files
with
37 additions
and
17 deletions
datalets/graph-datalet/graph-datalet.html
... | ... | @@ -76,7 +76,7 @@ Example: |
76 | 76 | |
77 | 77 | </style> |
78 | 78 | |
79 | - <div style="align-content: center;" id="graph_content"> | |
79 | + <div style="align-content: center;overflow: visible" id="graph_content"> | |
80 | 80 | <svg id="sbiricuda"></svg> |
81 | 81 | </div> |
82 | 82 | |
... | ... | @@ -119,7 +119,7 @@ Example: |
119 | 119 | |
120 | 120 | width: { |
121 | 121 | type: Number, |
122 | - value: 1250 | |
122 | + value: undefined | |
123 | 123 | }, |
124 | 124 | |
125 | 125 | height : { |
... | ... | @@ -143,6 +143,21 @@ Example: |
143 | 143 | .call(d3.behavior.zoom().scaleExtent([.25, 20]).on("zoom", this.zoom)) |
144 | 144 | .append("g"); |
145 | 145 | |
146 | + //set initial zoom | |
147 | + scale = (0.8); | |
148 | + //translate = [(width-scale*width)/2, ((height-scale*height)/4)]; | |
149 | + translate = [0, 0]; | |
150 | + console.log("w: " + width + " h:" + height); | |
151 | + this.svg.transition() | |
152 | + .duration(750) | |
153 | + .attr("transform", "translate(" + translate + ")scale(" + scale + ")") | |
154 | + .each("end", function () { | |
155 | + d3.behavior.zoom() | |
156 | + .scale(scale) | |
157 | + .translate(translate); | |
158 | + }); | |
159 | + //end set initial zoom | |
160 | + | |
146 | 161 | this.svg.append("rect") |
147 | 162 | .attr("fill", "white") |
148 | 163 | .attr("width", width) |
... | ... | @@ -186,6 +201,10 @@ Example: |
186 | 201 | |
187 | 202 | glinks = this.svg.selectAll(".link").data(graph.links).enter().append("line").attr("class", "link"); |
188 | 203 | |
204 | + this.svg.selectAll(".link").attr("style", function(t){ | |
205 | + return "stroke:" + t.color | |
206 | + }); | |
207 | + | |
189 | 208 | gnodes = this.svg.selectAll(".node").data(graph.nodes).enter().append("g").attr("class", function (t) { |
190 | 209 | return t.fixed ? "node fixed" : "node" |
191 | 210 | }).attr("name", function (t) { |
... | ... | @@ -203,7 +222,7 @@ Example: |
203 | 222 | return t.r ? t.r : 15 |
204 | 223 | }) |
205 | 224 | .attr("style", function (t) { |
206 | - return t.color ? "stroke:" + t.color : !1 | |
225 | + return t.color ? "fill:" + t.color : !1 + "; stroke:white" | |
207 | 226 | }); |
208 | 227 | |
209 | 228 | d3.selectAll('circle').attr("filter", function(t){return t.image ? 'url(#filter1)' : ""}); |
... | ... | @@ -217,6 +236,7 @@ Example: |
217 | 236 | |
218 | 237 | zoom: function() { |
219 | 238 | svg.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")"); |
239 | + console.log(d3.event.scale); | |
220 | 240 | }, |
221 | 241 | |
222 | 242 | text: function (t) |
... | ... | @@ -233,9 +253,9 @@ Example: |
233 | 253 | tick : function () { |
234 | 254 | // d3.select("svg").attr("style", "transform:translate(8%)"); |
235 | 255 | d3.selectAll("g foreignObject").attr("x", function (t) { |
236 | - return t.x + (t.r ? 1.1 * t.r : 15) | |
256 | + return t.x + (t.r ? 0.8 * t.r : 15) | |
237 | 257 | }).attr("y", function (t) { |
238 | - return t.y - 35 | |
258 | + return t.y - 20 | |
239 | 259 | }); |
240 | 260 | |
241 | 261 | d3.selectAll("#logo text").attr("x", function (t) { |
... | ... | @@ -278,19 +298,17 @@ Example: |
278 | 298 | _this.fire('graph-datalet_node-clicked', {node : t}); |
279 | 299 | |
280 | 300 | if(prev_selected_node != null){ |
281 | - prev_selected_node.style.stroke = prev_selected_node.style.fill; | |
282 | - prev_selected_node.style.fill = ""; | |
301 | + prev_selected_node.style.fill = prev_selected_node.style.stroke; | |
302 | + prev_selected_node.style.stroke = "#FFFFFF"; | |
283 | 303 | } |
284 | 304 | |
285 | 305 | prev_selected_node = document.getElementById("" + t.id); |
286 | - prev_selected_node.style.fill = prev_selected_node.style.stroke; | |
287 | - prev_selected_node.style.stroke = "#000000"; | |
306 | + prev_selected_node.style.fill = "#FFFFFF" | |
307 | + prev_selected_node.style.stroke = t.color; | |
288 | 308 | |
289 | 309 | _this.$.dialog.close(); |
290 | 310 | _this.$.dialog_title.innerHTML = t.name; |
291 | 311 | _this.$.dialog_content.innerHTML = t.content; |
292 | - /*_this.$.dialog.style.top = t.y + "px"; | |
293 | - _this.$.dialog.style.left = t.x + "px";*/ | |
294 | 312 | |
295 | 313 | _this.$.dialog.open(); |
296 | 314 | }, |
... | ... | @@ -313,12 +331,13 @@ Example: |
313 | 331 | |
314 | 332 | _this = this; |
315 | 333 | |
316 | - this.height = 9 * this.width / 16; | |
334 | + //this.height = 9 * this.width / 16; | |
335 | + //this.height = this.width; | |
317 | 336 | |
318 | 337 | width = this.width; |
319 | 338 | height = this.height; |
320 | 339 | |
321 | - this.$.graph_content.style.height = height + "px"; | |
340 | + //this.$.graph_content.style.height = height + "px"; | |
322 | 341 | |
323 | 342 | this.svg = d3.select("svg#sbiricuda").attr("class", "svg").attr({ |
324 | 343 | width: "100%", |
... | ... | @@ -332,8 +351,9 @@ Example: |
332 | 351 | |
333 | 352 | var g = this.data; |
334 | 353 | g.nodes[0].x = this.width / 2; |
335 | - g.nodes[0].y = this.height / 2; | |
354 | + g.nodes[0].y = this.height / 8; | |
336 | 355 | this.buildGraph(g); |
356 | + console.log(g.nodes.length); | |
337 | 357 | } |
338 | 358 | }); |
339 | 359 | </script> | ... | ... |
datalets/graph-datalet/static/css/graphStyle.css
... | ... | @@ -10,7 +10,7 @@ circle{ |
10 | 10 | .node { |
11 | 11 | cursor: move; |
12 | 12 | fill: #fff; |
13 | - stroke: #959595; | |
13 | + stroke: #FFFFFF; | |
14 | 14 | stroke-width: 4.5px |
15 | 15 | z-index: 100; |
16 | 16 | } |
... | ... | @@ -23,7 +23,7 @@ circle{ |
23 | 23 | |
24 | 24 | .link { |
25 | 25 | stroke: #d0d0d0; |
26 | - stroke-width: 2.5px | |
26 | + stroke-width: 1.0px | |
27 | 27 | } |
28 | 28 | |
29 | 29 | g foreignObject { |
... | ... | @@ -39,7 +39,7 @@ g foreignObject { |
39 | 39 | g foreignObject div { |
40 | 40 | font-family: 'Roboto', sans-serif; |
41 | 41 | display: inline-block; |
42 | - font-size: 12px; | |
42 | + font-size: 8px; | |
43 | 43 | text-decoration: none; |
44 | 44 | padding: 0px |
45 | 45 | } | ... | ... |