WebCompDev / COMPONENTS

Commit 01a6d2e57c0586b430fc3c8218a9341ba4d3a637

Authored by Luigi Serra
1 parent 8a1473fe

graph updates

Inline Side-by-side
Showing 2 changed files with 37 additions and 17 deletions
datalets/graph-datalet/graph-datalet.html
  View file @01a6d2e
... ... @@ -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
  View file @01a6d2e
... ... @@ -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 }
... ...