Changeset 5300


Ignore:
Timestamp:
05/27/14 21:19:28 (10 years ago)
Author:
xnrn@gmx.net
Message:

multiple minor changes: added mode dynamic for load-detail; experimental special detail for "philosophers"; dynamic force.charge; links without markers; linkDistance back to static; fix start horizontal tree to the left; prevent endless highlight loop; dynamic font-size

File:
1 edited

Legend:

Unmodified
Added
Removed

  • SMC/trunk/SMC/src/web/scripts/js/smc-graph.js

    r3815 r5300  
    99var data_show = null; // global holder for data to show  closure over nodes_sel
    1010var nest = {};
    11 var detail_data = null; // global holder for detail-data (in html) 
     11var detail_data = null; // global holder for detail-data (in html)
     12var mode = "dynamic";   // dynamic or static (default)  static=load detail data all at once on init;
    1213 
    1314
    … …  
    1516var select_rect_min_size = 5;
    1617var first_level_margin = 20;
     18var base_font_size = 10;
    1719var min_circle = 4;
    1820var max_circle = 80;
    1921
    2022var show_count = 1;
    21 var show_arrows = 0;
    22 
     23 
     24
     25var detail_url = "http://localhost:8580/exist/apps/smc-browser/get.xql";
    2326var comp_reg_url = "http://catalog.clarin.eu/ds/ComponentRegistry/?item=";
     27var wiki_url = "http://en.wikipedia.org/wiki/";
    2428var mdrepo_url_search = "http://localhost:8680/exist/apps/cr-xq/mdrepo/index.html?operation=searchRetrieve&x-context=&query=";
    2529/*http://localhost:8680/exist/apps/cr-xq/mdrepo/fcs?operation=scan&scanClause=cmd:CountryName&x-context=&x-format=htmlpage*/
    … …  
    3842//var source_file = "/smc/smc-graph.d3";
    3943/*var source_file = "/smc/cmd-dep-graph.d3.js";*/
    40 var detail_file = "smc_stats_detail.html";
    41 var userdocs_file = "userdocs.html";
    42 
    43 var opts = {"graph": {"value":"/smc/data/profiles.js",
     44var detail_file = "/smc/data/smc_stats_detail.html";
     45var userdocs_file = "/smc/docs/userdocs.html";
     46
     47var opts = {"graph": {"value":"/smc/data/smc-graph-basic.js",
    4448                    "values":[{value: "/smc/data/smc-graph-basic.js", label:"SMC graph basic"},
    4549                              {value: "/smc/data/smc-graph-all.js", label:"SMC graph all"},                             
    4650                              {value: "/smc/data/smc-graph-profiles-datcats.js", label:"only profiles + datcats"},
    4751                              {value: "/smc/data/smc-graph-groups-profiles-datcats-rr.js", label:"profiles+datcats+groups+rr"},
    48                               {value: "/smc/data/profiles.js", label:"just profiles"}                             
    49                              
     52                              {value: "/smc/data/smc-graph-profiles-similarity.js", label:"just profiles"},                             
     53                              {value: "/smc/data/dbpedia_philosophers_influence_years_graph.json", label:"Philosophers"},
     54                              {value: "/smc/data/SC_Persons_120201_cAll_graph.json", label:"Schnitzler Cooccurrences"},
    5055                              /*,
    5156                              {value: "/smc/data/smc-graph-mdrepo-stats.js", label:"instance data"}*/
    … …  
    5762            "charge":{"value":250, "min":10, "max":1000, "widget":"slider" },
    5863            "friction":{"value":75, "min":1, "max":100, "widget":"slider" },
    59             "gravity":{"value":20, "min":1, "max":100, "widget":"slider" },
    60             "node-size": {"value":"count", "values":["1","4","8","16","count"], "widget":"selectone" },
     64            "gravity":{"value":10, "min":1, "max":100, "widget":"slider" },
     65            "node-size": {"value":"4", "values":["1","4","8","16","count"], "widget":"selectone" },
    6166            "labels": {"value":"show", "values":["show","hide"], "widget":"selectone" },                         
    62             "curve": {"value":"straight", "values":["straight","arc"], "widget":"selectone" },
    63            "layout": {"value":"force", "values":["vertical-tree", "horizontal-tree", "weak-tree","force","dot", "freeze"], "widget":"selectone" },
     67            "curve": {"value":"straight-arrow", "values":["straight-line","arc-line","straight-arrow","arc-arrow"], "widget":"selectone" },
     68           "layout": {"value":"horizontal-tree", "values":["vertical-tree", "horizontal-tree", "weak-tree","force","dot", "freeze"], "widget":"selectone" },
    6469            "selected": {"widget":"hidden" },
    6570            "link": {"widget":"link", "label":""},
    … …  
    112117                 var init_level = [];
    113118                    data_all.nodes.forEach(function(d,i){init_level.push(+d.level);})
    114                     data_all.level_min = d3.min(init_level);
     119                    data_all.level_min = (d3.min(init_level)==d3.max(init_level)) ? (d3.min(init_level) - 1) : d3.min(init_level) ;
    115120               
    116121                 var init_count = [];
    … …  
    215220                           
    216221                 item_detail.append("a")
    217                             .attr("href",function (d) { if (d.type.toLowerCase()=='datcat') return d.id
     222                            .attr("href",function (d) { if (d.type.toLowerCase()=='datcat') return d.id
     223                                                        else if (d.type.toLowerCase()=='philosopher') return wiki_url + d.id; 
    218224                                                        else return comp_reg_url + d.id })
    219225                            .text(function (d) { return d.id });
    … …  
    235241                 item_detail_detail = item_detail.append("div").html(
    236242                                 function (d) {
    237                                     var detail_info_div = getDetailInfo(d.type.toLowerCase(), d.key);
     243                                    var detail_info_div = getDetailInfo(d.type.toLowerCase(), d.key, this);
    238244                                    if (detail_info_div) {
    239245                                        return detail_info_div
    … …  
    315321     var ratio = w / (data_all.init_x_max - data_all.init_x_min);
    316322    var node_size_int = parseInt(opt("node-size"));
     323    var font_size_int = base_font_size + (node_size_int / 2); 
    317324 var link_distance = parseInt(opt("link-distance"))
    318325 
    … …  
    327334            .gravity(parseInt(opt("gravity")) / 100 )
    328335           
    329 /*            .linkDistance(parseInt(opt("link-distance")))*/
     336            .linkDistance(parseInt(opt("link-distance")))
    330337           
    331             .linkDistance(function(d){return link_distance / (d.weight * d.value) })
     338/*            .linkDistance(function(d){return link_distance / (d.weight * d.value) })*/
    332339            /* Profiles:           
    333            
    334            
    335             .linkStrength(function(d){return d.weight})*/
     340            .linkStrength(function(d){return d.value})
     341                       
     342            */
    336343            //.charge(parseInt(opt("charge")) * -1)
    337344         
    … …  
    367374       
    368375        // Per-type markers, as they don't inherit styles.
    369       if (show_arrows)  {
     376       
     377      if (opt("curve").indexOf("arrow") > -1)  {
    370378        svg.append("svg:defs").selectAll("marker")
    371379          .data(["uses"])
    … …  
    447455           
    448456            gnodes.append("title")
    449 /*                .text(function (d) { return d.name + ' |' + d.count + '|' })*/
     457/*                .text(function (d) { return d.name + ' |' + d.count + '|' })*/                   
    450458                  .text(renderItemText);
    451459                 
    … …  
    466474                 .attr("x", 8)
    467475                 .attr("y", ".31em")
     476                 .style("font-size", function(d) {
     477                                    var fontsize = '';
     478                                if (opt("node-size")=="count")
     479                                        {  fontsize = (Math.sqrt(d.count)<=min_circle) ?  base_font_size : Math.sqrt(d.count) / data.node_size_ratio;                                       
     480                                        }
     481                                        else { fontsize = font_size_int; }
     482                                        return fontsize + 'px';
     483                                        })
    468484                 .attr("class", "shadow")
    469485                 .classed("hide", opt("labels")=='hide')
    … …  
    472488                 .attr("x", 8)
    473489                 .attr("y", ".31em")
     490                 .style("font-size", function(d) {
     491                                    var fontsize = '';
     492                                if (opt("node-size")=="count")
     493                                        {  fontsize = (Math.sqrt(d.count)<=min_circle) ?  base_font_size  : Math.sqrt(d.count) / data.node_size_ratio;                                       
     494                                        }
     495                                        else { fontsize = font_size_int; }
     496                                        return fontsize + 'px';
     497                                        })
    474498                 .classed("hide", function(d) { return !d.selected && opt("labels")=='hide'})
    475499                 .text(function(d) { return d.name; });
    … …  
    508532                   var kx= 1.4 * e.alpha, ky = .4 * e.alpha;
    509533                   data.links.forEach(function(d, i) {
    510                        if (d.source.level==data_all.level_min) { d.source.x = first_level_margin };
     534                       //if (d.source.level==data_all.level_min) { d.source.x = first_level_margin };
     535                       if (data_show.roots.indexOf(d.source.key) > -1 ) { d.source.x = first_level_margin };
    511536                       //d.target.y += (d.source.y - d.target.y)  * ky;
    512537                       d.target.x += (d.source.x - d.target.x + link_distance_int  ) * kx;
     538                       //d.target.x += (d.source.x - d.target.x ) * kx;
    513539                  });
    514540           }
    … …  
    528554       path.attr("d", function(d) {
    529555             // links as elliptical arc path segments
    530             if (opt("curve")=="arc")
     556            if (opt("curve").indexOf("arc") > -1)
    531557            {   var dx = d.target.x - d.source.x,
    532558                    dy = d.target.y - d.source.y,
    … …  
    590616function loadDetailInfo () {
    591617     
    592   $(detail_info_holder_selector).load(detail_file,function(data) {
    593      $(detail_container_selector).find("h3").after(
    594      '<div id="detail-summary-overall" class="cmds-ui-block init-show" ><div class="header">Overview</div><div class="content">'
    595      + getDetailInfo("summary", "overall") + '</div></div>');
     618     if (mode=='static') {
     619     $(detail_info_holder_selector).load(detail_file,function(data) {
     620        $(detail_container_selector).find("h3").after(
     621        '<div id="detail-summary-overall" class="cmds-ui-block init-show" ><div class="header">Overview</div><div class="content">'
     622        + getDetailInfo("summary", "overall") + '</div></div>');
     623       
     624        handleUIBlock($(detail_container_selector).find(".cmds-ui-block"));
     625       
     626        // only render detail for initially selected nodes, after the detail info has been loaded
     627        if (nodes_sel) { renderDetail(nodes_sel) };
    596628     
    597      handleUIBlock($(detail_container_selector).find(".cmds-ui-block"));
    598      
    599      // only render detail for initially selected nodes, after the detail info has been loaded
    600      if (nodes_sel) { renderDetail(nodes_sel) };
    601      
    602   });
     629       });
     630      }
    603631 
    604632  // loading css to store in extra variable, for later use = injecting into exported SVG
    … …  
    610638}
    611639
    612 function getDetailInfo(type, id) {
     640function getDetailInfo(type, id, target) {
    613641    //notify("getDetailInfo: #" + type + "-" + id );
    614     var d = $(detail_info_holder_selector).find("#" + type + "-" + id );
     642   
     643    if (type=='philosopher') {
     644    // access origin problem!
     645        url = "http://localhost/smc-dev/get.php?link=" + wiki_url + id;
     646         $(target).load(url + " .infobox");         
     647    } else
     648        if (mode=='static' ) {
     649            var d = $(detail_info_holder_selector).find("#" + type + "-" + id );
     650            return d.html();       
     651        } else {
     652            var url = detail_url + "?type=" + type + "&id=" + id;
     653                $(target).toggleClass("loading");
     654                 $(target).load(url);
     655        }
    615656    // notify(d);
    616     return d.html();
     657   
    617658}
    618659
    … …  
    722763*/
    723764function highlight() {
     765//prevent endless highlight loop
     766   max_depth = parseInt(opt("depth-before")) + parseInt(opt("depth-after"));
     767   console.log ("max_depth:" + max_depth);
    724768  return function(d, i) {
    725769    // console.log ("fade:" + d.key);
    726     var connected_subgraph_in = neighboursWithLinks(data_show, d,'in', -1);
    727     var connected_subgraph_out = neighboursWithLinks(data_show, d,'out', -1);
     770    //var connected_subgraph_in = neighboursWithLinks(data_show, d,'in', -1);
     771    //var connected_subgraph_out = neighboursWithLinks(data_show, d,'out', -1);
     772   
     773    var connected_subgraph_in = neighboursWithLinks(data_show, d,'in', max_depth);
     774    var connected_subgraph_out = neighboursWithLinks(data_show, d,'out', max_depth);
    728775    var connected_subgraph = {"nodes": [], "links": []};
    729776        connected_subgraph.nodes = connected_subgraph.nodes.concat(connected_subgraph_in.nodes).concat(connected_subgraph_out.nodes);
    … …  
    822869    var neighbours = {"links_index": {}, "nodes_index": {},
    823870                      "nodes_in": {}, "nodes_out": {},
    824                       "links_in": {}, "links_out": {}};
    825        
    826         data.nodes.forEach(function(d){
     871                      "links_in": {}, "links_out": {},
     872                      "roots": []};
     873       
     874        data.nodes.forEach(function(d){           
    827875            neighbours.nodes_index[d.key] = d;
    828876        });
     877       
     878        var targets=[];
    829879       
    830880        links.forEach(function(d) {
    831881                            src_key = d.source.key;
    832882                            trg_key = d.target.key;
     883                           
    833884                         // generate lookup hashes for neighbours;
    834885                            neighbours.links_index[src_key + "," + trg_key] = d;
    … …  
    842893                                     }
    843894                             }
    844                             if (d.target) {
     895                            if (d.target) {
     896                                if (targets.indexOf(d.target.key) == -1 ) { targets.push(d.target.key); }
     897                               
    845898                                    if (! neighbours.nodes_out[src_key]) {
    846899                                        neighbours.nodes_out[src_key] = [d.target];
    … …  
    852905                             }
    853906                       });
     907           
     908        data.nodes.forEach(function(d){
     909            if (targets.indexOf(d.key) == -1)
     910            { neighbours.roots.push(d.key); }
     911        });
     912
     913   
     914    //if it is target, it is no root
     915                           
     916                           
    854917                       
    855918    data = $.extend(data, neighbours);
Note: See TracChangeset for help on using the changeset viewer.