- Timestamp:
- 01/12/13 12:11:16 (11 years ago)
- File:
-
- 1 edited
Legend:
- Unmodified
- Added
- Removed
-
SMC/trunk/SMC/src/web/scripts/js/cmd-dep-graph.js
r2440 r2455 1 1 2 2 3 var item_li = null; 3 4 4 5 var svg = null; // main svg-element … … 9 10 var detail_data = null; // global holder for detail-data (in html) 10 11 12 13 var index_container_selector = "#index-container"; 11 14 var graph_container_selector = '#infovis'; 12 15 var navi_container_selector = '#navigate'; 16 var detail_container_selector = "#detail-container"; 17 var detail_info_holder_selector = '#detail-info-holder'; 18 13 19 var graph_container = null; 14 20 var index_container = null; … … 23 29 24 30 var opts = {"depth-before": {"value":2, "min":0, "max":10, "widget":"slider"}, 25 "depth-after":{"value": 1, "min":0, "max":10, "widget":"slider"},31 "depth-after":{"value":2, "min":0, "max":10, "widget":"slider"}, 26 32 "link-distance": {"value":30, "min":10, "max":200, "widget":"slider" }, 27 33 "charge":{"value":400, "min":10, "max":1000, "widget":"slider" }, 28 "node-weight": {"value":" usage", "values":["1","usage"], "widget":"selectone" },34 "node-weight": {"value":"1", "values":["1","usage"], "widget":"selectone" }, 29 35 "curve": {"value":"straight", "values":["straight","arc"], "widget":"selectone" }, 30 "layout": {"value":" dot", "values":["dot","force"], "widget":"selectone" },36 "layout": {"value":"horizontal-tree", "values":["vertical-tree", "horizontal-tree", "weak-tree","force","dot"], "widget":"selectone" }, 31 37 32 38 }; … … 47 53 function loadDetailInfo () { 48 54 49 $('#detail-info-holder').load(detail_file) 55 $(detail_info_holder_selector).load(detail_file,function(data) { 56 $(detail_container_selector).html(getDetailInfo("summary", "overall")); 57 }); 58 50 59 51 60 /* $.get(detail_file, function(data) { … … 57 66 58 67 function getDetailInfo(type, id) { 59 notify("getDetailInfo: #" + type + " s-" + id );60 var d = $( '#detail-info-holder').find("#" + type + "s-" + id );68 notify("getDetailInfo: #" + type + "-" + id ); 69 var d = $(detail_info_holder_selector).find("#" + type + "-" + id ); 61 70 // notify(d); 62 71 return d.html(); … … 126 135 }); 127 136 128 renderIndex (data_all.nodes);137 renderIndex_default(); 129 138 //renderGraph(data_all, graph_container); 130 139 }); 131 140 } 132 141 142 /* there was a strange problem with overloading */ 143 function renderIndex_default () { 144 renderIndex (data_all.nodes, index_container_selector) 145 } 133 146 134 147 /** generate the index lists 135 148 @param nodes - accepts an array of nodes (like in data.nodes) 136 149 */ 137 function renderIndex (nodes) { 150 function renderIndex (nodes, target_container_selector) { 151 138 152 nest = d3.nest() 139 153 .key(function(d) { return d.type; }) … … 141 155 .entries(nodes); 142 156 143 index_container = d3.select("#index-container"); 144 index_container.selectAll("div").remove(); 145 var group_divs = index_container.selectAll("div").data(nest) 157 target_container = d3.select(target_container_selector); 158 target_container.selectAll("div").remove(); 159 160 // rendering extra-information about the displayed data only in detail-index 161 if (target_container_selector != index_container_selector) { 162 target_container.append("span") 163 .text("show nodes: " + data_show.nodes.length + "; " 164 + "show links: " + data_show.links.length); 165 } 166 167 var group_divs = target_container.selectAll("div").data(nest) 146 168 .enter().append("div") 147 169 .attr("id", function (d) { return "detail-" + d.key }) … … 149 171 150 172 var group_headers = group_divs.append("div").classed("header", 1) 151 .text(function (d) { return d.key });173 .text(function (d) { return d.key + " |" + d.values.length + "|"}); 152 174 153 var item_li = group_divs.append("div").classed("content",1) 154 .append("ul").selectAll(".node-item") 175 var list = group_divs.append("div").classed("content",1) 176 .append("ul"); 177 var item_li = list.selectAll(".node-item") 155 178 .data(function(d) { return d.values; }) 156 179 .enter().append("li") 157 180 .attr("class", "node-item") 158 .attr("id", function (d) { return "n-" + d.name }) 159 .text(function (d) { return d.name}) 160 .classed("highlight", function (d) { return d.selected }) 161 .on("click", function(d) { d.selected= d.selected ? 0 : 1 ; updateSelected() }); 181 .text(function (d) { return d.name}) 182 .on("click", function(d) { d.selected= d.selected ? 0 : 1 ; updateSelected() }); 183 184 185 /* slightly different behaviour for the main-index and rendering of the selected nodes in the detail-view */ 186 // console.log("target_container:" + target_container_selector); 187 if (target_container_selector == index_container_selector) { 188 index_container = target_container; 189 item_li.attr("id", function (d) { return "n-" + d.name }); 190 item_li.classed("highlight", function (d) { return d.selected }); 191 192 } else { 193 var item_detail = item_li.append("div") 194 .classed("node-detail", 1); 195 196 item_detail.text(function (d) { return "links_in: " + dataShowCount(d.key, "links_in") + "; links_out: " + dataShowCount(d.key, "links_out") ; 197 }) 198 .append("a") 199 .attr("href",function (d) { if (d.type.toLowerCase()=='datcat') return d.id 200 else return comp_reg_url + d.id }) 201 .text(function (d) { return d.id }); 202 item_detail.append("div").html( 203 function (d) { var detail_info_div = getDetailInfo(d.type.toLowerCase(), d.key); 204 if (detail_info_div) {return detail_info_div } else 205 { return "<div>No detail</div>"; } 206 }); 207 208 209 210 } 162 211 //.classed("detail", 1); 163 164 handleUIBlock($(".cmds-ui-block")); 212 //console.log($(target_container_selector).find(".cmds-ui-block")); 213 handleUIBlock($(target_container_selector).find(".cmds-ui-block")); 214 165 215 } 166 216 167 217 function filterIndex (search_string){ 168 218 var filtered_index_nodes = data_all.nodes.filter(function(d, i) { 169 console.log(d.name.indexOf(search_string));170 return d.name. indexOf(search_string) > -1;219 // console.log(d.name.indexOf(search_string)); 220 return d.name.toLowerCase().indexOf(search_string) > -1; 171 221 }); 172 222 console.log(filtered_index_nodes); 173 renderIndex(filtered_index_nodes );223 renderIndex(filtered_index_nodes, index_container_selector); 174 224 } 175 225 … … 190 240 $(target_container).text(""); 191 241 } 192 var w = $(target_container).width(), 193 h = $(target_container).height(); 242 243 244 var w = $(target_container).width(), 245 h = $(target_container).height(); 246 247 194 248 // console.log (w + '-' + h); 195 249 var force = d3.layout.force() … … 197 251 .links(data.links) 198 252 .size([w, h]) 253 // .gravity(0) 199 254 .linkDistance(opt("link-distance")) 200 255 .charge(opt("charge") * -1) 201 256 .on("tick", tick) 202 257 .start(); 203 258 console.log ("gravity: " + force.gravity() ); 204 259 // remove old render: 205 260 d3.select(graph_container_selector).selectAll("svg").remove(); … … 238 293 .attr("r", function(d) { if (opt("node-weight")=="1"){ return min_circle } 239 294 else {return (Math.sqrt(d.count)>min_circle ? Math.sqrt(d.count) * 2 : min_circle); } }) 240 .attr("x", function(d) {return d.init_x;})241 .attr("y", function(d) {return d. init_y;})295 /* .attr("x", function(d) {return d.x;}) 296 .attr("y", function(d) {return d.y;})*/ 242 297 .call(force.drag); 243 298 … … 249 304 .classed("selected", function(d) { return d.selected; }) 250 305 .on("click", function(d) {d.selected= d.selected ? 0 : 1; updateSelected() }); 306 .on("mouseover", function(d) {console.log(this)}); 251 307 252 308 … … 273 329 .text(function(d) { return d.name; }); 274 330 275 331 332 276 333 /* 277 334 force.start(); … … 304 361 305 362 function tick(e) { 363 var link_distance = parseInt(opt("link-distance")); 364 var k = 10 * e.alpha; 365 if (opt("layout")=='dot') { 366 var link_distance_int = parseInt(opt("link-distance")); 367 data.links.forEach(function(d, i) { 368 d.source.x = (d.source.init_x / 150 * link_distance_int) ; 369 d.target.x = (d.target.init_x / 150 * link_distance_int); 370 //d.target.y += (d.target.init_y / 300 ) * k; 371 /* d.source.x = (d.source.level * link_distance_int) + link_distance_int; 372 d.target.x = (d.target.level * link_distance_int) + link_distance_int;*/ 373 /*d.source.x = d.source.level * 2 * opt("link-distance") + 50; 374 d.target.x = d.target.level * 2 * opt("link-distance") + 50;*/ 375 }); 376 } else if (opt("layout")=='weak-tree') { 377 data.links.forEach(function(d, i) { 378 d.source.x -= k; 379 d.target.x += k; 380 381 //d.source.x -= k * d.source.level / (dataShowCount(d.source.key, "links_out") + 0.1); // 0.1 to prevent div/0 382 //d.target.x += k * d.target.level / (dataShowCount(d.target.key, "links_in") + 0.1); 383 }); 384 } else if (opt("layout")=='vertical-tree') { 385 var ky= 1.4 * e.alpha, kx = .4 * e.alpha; 386 data.links.forEach(function(d, i) { 387 if (d.source.level==0) { d.source.y = 20 }; 388 d.target.x += (d.source.x - d.target.x) * kx; 389 d.target.y += (d.source.y - d.target.y + link_distance) * ky; 390 }); 391 } else if (opt("layout")=='horizontal-tree') { 392 var kx= 1.4 * e.alpha, ky = .4 * e.alpha; 393 data.links.forEach(function(d, i) { 394 if (d.source.level==0) { d.source.x = 20 }; 395 d.target.y += (d.source.y - d.target.y) * ky; 396 d.target.x += (d.source.x - d.target.x + link_distance ) * kx; 397 }); 398 } 399 400 /* parent foci 401 var kx = 1.2 * e.alpha; 402 data.links.forEach(function(d, i) { 403 d.target.x += (d.target.level * link_distance - d.target.x) * kx; 404 });*/ 405 406 /* obsoleted: 407 /*data.links.forEach(function(d, i) { 408 d.source.x -= (k * d.source.init_x / (200 * Math.sqrt(d.source.count)) ); 409 d.target.x += (k * d.target.init_x / (50 * Math.sqrt(d.target.count)) ); 410 });*/ 306 411 307 var k = e.alpha;308 if (opt("layout")=='dot') {309 var link_distance_int = parseInt(opt("link-distance"));310 data.links.forEach(function(d, i) {311 d.source.x = (d.source.init_x / 150 * link_distance_int) ;312 d.target.x = (d.target.init_x / 150 * link_distance_int);313 /* d.source.x = (d.source.level * link_distance_int) + link_distance_int;314 d.target.x = (d.target.level * link_distance_int) + link_distance_int;*/315 /*d.source.x = d.source.level * 2 * opt("link-distance") + 50;316 d.target.x = d.target.level * 2 * opt("link-distance") + 50;*/317 });318 }319 320 412 /*d.source.y = d.source.init_y - d.source.y * k; 321 413 d.target.y = d.target.init_y + d.target.y * k;*/ … … 327 419 //d.target.x += d.target.level * 0.2; 328 420 329 330 } 421 transform(); 422 } // end tick() 331 423 332 424 … … 396 488 */ 397 489 function renderDetail (nodes) { 490 491 renderIndex (nodes, detail_container_selector); 492 } 493 494 function renderDetail_old (nodes) { 398 495 /* 399 496 nest = d3.nest() … … 463 560 renderDetail(nodes_sel); 464 561 465 index_container.selectAll("li").classed("highlight", function (d) { return d.selected }); 466 } 467 468 469 470 /** generates the subset of data to display (based on selected nodes + options) */ 562 // index_container.selectAll("li").classed("highlight", function (d) { return d.selected }); 563 } 564 565 566 567 /** generates the subset of data to display (based on selected nodes + options) 568 fills global variable: data_show ! 569 */ 471 570 function dataToShow (nodes) { 472 571 data_show = {}; … … 484 583 data_show.nodes = unique_nodes(nodes.concat(data_show_collect.nodes)); 485 584 data_show.links = unique_links(data_show_collect.links); 486 585 586 // extend the object, with some lookup hashes on neighbourhood 587 hashes = gen_neighbours(data_show.links); 588 data_show = $.extend(data_show, hashes); 487 589 /* data_show.nodes.forEach; data_all.links; 488 590 .filter(function(e) {*/ … … 495 597 } 496 598 497 599 /** generate lookup hashes for neighbours; 600 */ 601 function gen_neighbours(links) { 602 603 var neighbours = {"links_index": {}, 604 "nodes_in": {}, "nodes_out": {}, 605 "links_in": {}, "links_out": {}}; 606 607 links.forEach(function(d) { 608 src_key = d.source.key; 609 trg_key = d.target.key; 610 // generate lookup hashes for neighbours; 611 neighbours.links_index[src_key + "," + trg_key] = d; 612 if (d.source) { 613 if (! neighbours.nodes_in[trg_key]) { 614 neighbours.nodes_in[trg_key] = [d.source]; 615 neighbours.links_in[trg_key] = [d]; 616 } else { 617 neighbours.nodes_in[trg_key].push(d.source); 618 neighbours.links_in[trg_key].push(d); 619 } 620 } 621 if (d.target) { 622 if (! neighbours.nodes_out[src_key]) { 623 neighbours.nodes_out[src_key] = [d.target]; 624 neighbours.links_out[src_key] = [d]; 625 } else { 626 neighbours.nodes_out[src_key].push(d.target); 627 neighbours.links_out[src_key].push(d) ; 628 } 629 } 630 }); 631 632 return neighbours; 633 634 } 635 636 function dataShowCount(n_key, info_type) { 637 638 if (data_show[info_type][n_key]) { 639 return data_show[info_type][n_key].length; 640 } else { 641 return 0 642 } 643 } 498 644 /** returns appropriate link 499 645 */ … … 636 782 } else if (opts[key].widget =="selectone") { 637 783 [new_input,new_widget] = genCombo(key, opts[key].values); 638 784 // set initial value 785 $(new_input).val(opts[key].value); 639 786 640 787 // $(new_input).autocomplete({"source":opts[key].values});
Note: See TracChangeset
for help on using the changeset viewer.
