チェンジセット 232 : SPARQLBuilderWWW

差分発生行の前後
無視リスト:
更新日時:
2015/02/06 15:51:58 (10 年 前)
更新者:
lenz
ログメッセージ:

BH14.14の作業成果

新UIと埋め込み方式の変更、結果のダウンロードボタン

残タスク:サンプル関係。サンプルボタンもGETでいきなりオープンも指定結果のパーマリンク作成もまだ

パス:
SPARQLBuilderWWW/web
ファイル:
5 追加
1 変更

凡例:

変更なし
追加
削除
  • SPARQLBuilderWWW/web/sparqlbuilder.js

    r225 r232  
    232232        // SVG縺ョ蟷�→鬮倥&繧定ィュ螳夲シ亥ケ�シ夂判髱「縺�▲縺ア縺�€€鬮倥&�壹ヱ繧ケ縺ョ謨ー縺ォ蠢懊§險ュ螳夲シ� 
    233233        var width = this.width; 
    234         var height = ((this.NODEHEIGHT * 1.5) * this.PATHNUM) + (this.NODEHEIGHT / 2); 
     234        var height = (width * 9 / 16); 
     235        var graphheight = ((this.NODEHEIGHT * 1.5) * this.PATHNUM) + (this.NODEHEIGHT / 2); 
     236 
     237        var scoreleftmargin = this.NODEHEIGHT * 1.5; 
    235238 
    236239        // 繧ォ繝ゥ繝シ繧貞叙蠕� 
     
    242245        var svg = d3.select("#sparqlBuilderGraph").append("svg") 
    243246            .attr("width", width) 
    244             .attr("height", height); 
     247            .attr("height", height) 
     248            .attr("viewBox", "0 0 " + width + " " + height) 
     249            .on("mousewheel", function(){ 
     250                var vb = svg.attr("viewBox"); 
     251                var spvb = vb.split(" "); 
     252 
     253                var vby = (parseInt(spvb[1]) - event.wheelDelta); 
     254 
     255                if(vby < 0){ 
     256                        vby = 0; 
     257                }else if(vby > (graphheight - height)){ 
     258                        vby = (graphheight - height); 
     259                }else{ 
     260                        event.preventDefault(); 
     261                } 
     262 
     263                svg.attr("viewBox", "0 " + vby + " " + width + " " + height); 
     264            }); 
    245265 
    246266        // 閭梧勹縺ョ霑ス蜉 
     
    250270            .attr("y", 0) 
    251271            .attr("width", width) 
    252             .attr("height", height) 
     272            .attr("height", graphheight) 
    253273            .attr("fill", "#fafafa"); 
    254274 
     
    296316            .style("fill", function(d) { return '#000000'; }) 
    297317            .style("text-anchor", function(d) { return 'middle'; }); 
     318 
     319        // nodes驟榊�繧呈ク。縺励ヮ繝シ繝峨ユ繧ュ繧ケ繝医�菴懈� 
     320        var tscore = svg.selectAll("text.score") 
     321            .data(json.nodes) 
     322            .enter().append("svg:text") 
     323            .attr("class", "tscore") 
     324            .attr("x", function(d) { return (d.x + scoreleftmargin); }) 
     325            .attr("y", function(d) { return d.y; }) 
     326            .text(function(d) { return d.score; 
     327            }) 
     328            .style("fill", function(d) { return '#FF0000'; }) 
     329            .style("text-anchor", function(d) { return 'middle'; }) 
     330            .style("pointer-events", "none"); 
    298331 
    299332        // 繝槭え繧ケ縺ョ蜍輔″繧ォ繧ヲ繝ウ繝医r繝ォ繝シ繝医↓謖√◆縺帙k 
     
    353386                    // 繝��繝ォ繝√ャ繝励�蜀�ョケ繧呈嶌縺肴鋤縺� 
    354387                    document.getElementById("sparqlBuilderSelectpath").innerHTML=(resultText); 
    355                     document.getElementById("sparqlBuilderShowpath").style.display = "block"; 
     388                    if(svg.attr("width") == width){ 
     389                        document.getElementById("sparqlBuilderShowpath").style.display = "block"; 
     390                    } 
    356391 
    357392                    // 繧オ繝シ繝悶Ξ繝�ヨ縺ォ騾√j霑斐☆繝代せ繧ェ繝悶ず繧ァ繧ッ繝医r菫晏ュ� 
     
    518553                }); 
    519554 
    520             // 縺薙%縺九i蟄舌ヮ繝シ繝峨�逡ウ縺ソ霎シ縺ソ蜃ヲ逅�シ育樟蝨ィ縺ッ蟒�ュ「縲∝ソオ縺ョ縺溘a繧ウ繝シ繝峨�谿九@縺ヲ縺翫¥�� 
    521             /* 
    522             var childs = []; 
    523             var prevchilds = []; 
    524             prevchilds.push(d.nodeid); 
    525  
    526             // 
    527             do{ 
    528                 var tmpchilds = []; 
    529                 var curchilds = []; 
    530                 for(var p = 0; p < prevchilds.length; p++){ 
    531                     tmpchilds = this.get_children(prevchilds[p], json['links']); 
    532                     curchilds = curchilds.concat(tmpchilds); 
    533                 } 
    534                 prevchilds = curchilds; 
    535                 childs = childs.concat(curchilds); 
    536  
    537             }while(curchilds.length != 0); 
    538  
    539             var childy = d.y; 
    540             for(var c = 0; c < childs.length; c++){ 
    541                 if(node.data()[childs[c]].y < childy){ 
    542                     childy = node.data()[childs[c]].y; 
    543                 } 
    544             } 
    545  
    546             d.y = childy; 
    547  
    548             var maxdy = 0; 
    549             var mindy = 0; 
    550  
    551             for(var c = 0; c < childs.length; c++){ 
    552                 if(node.data()[childs[c]].view != "hide"){ 
    553                     var dy = node.data()[childs[c]].y - d.y; 
    554                     if(dy > maxdy){ 
    555                         maxdy = dy; 
    556                     } 
    557                     node.data()[childs[c]].x = d.x; 
    558                     node.data()[childs[c]].y = d.y; 
    559                     node.data()[childs[c]].dy = dy; 
    560                     node.data()[childs[c]].view = "hide"; 
    561                     node.data()[childs[c]].hideparent = d.nodeid; 
    562                 }else{ 
    563                     if(node.data()[childs[c]].hideparent == d.nodeid){ 
    564                         node.data()[childs[c]].x = d.x + (this.TREESPACE * (node.data()[childs[c]].group - d.group)); 
    565                         node.data()[childs[c]].y = node.data()[childs[c]].y + node.data()[childs[c]].dy; 
    566                         if(-node.data()[childs[c]].dy < mindy){ 
    567                             mindy = -node.data()[childs[c]].dy; 
    568                         } 
    569                         node.data()[childs[c]].view = "appear"; 
    570                         node.data()[childs[c]].hideparent = -1; 
    571                     } 
    572                 } 
    573             } 
    574  
    575             node 
    576             .attr("r", function(d){ 
    577                 if(d.view == "appear"){ 
    578                     d.view = "no"; 
    579                 }else if(d.y > childy){ 
    580                     d.y = d.y - maxdy - mindy; 
    581                 } 
    582                 if(d.view == "hide"){ 
    583                     d.x = node.data()[d.hideparent].x; 
    584                     d.y = node.data()[d.hideparent].y; 
    585                 } 
    586                 if(d.nodeid == 0){ 
    587                     d.y = childy; 
    588                 } 
    589                 return (this.NODEHEIGHT / 2); 
    590             }); 
    591             */ 
    592  
    593555            // 蜷�Μ繝ウ繧ッ縺ォ蟇セ縺� 
    594556            tlink 
     
    631593                .attr("y2", function(d) {return node.data()[d.target].y;}); 
    632594 
    633             // 蜷�Μ繝ウ繧ッ繝�く繧ケ繝医↓縺、縺�※險ュ螳壹&繧後◆菴咲スョ縺ォ蜀肴緒逕サ 
    634             tlink 
    635                 .transition() 
    636                 .duration(duration) 
    637                 .attr("x", function(d) {return (node.data()[d.source].x + node.data()[d.target].x) / 2;}) 
    638                 .attr("y", function(d) {return ((node.data()[d.source].y + node.data()[d.target].y) / 2) + 5;}); 
    639  
    640595            // 蜷�ヮ繝シ繝峨↓縺、縺�※險ュ螳壹&繧後◆菴咲スョ縺ォ蜀肴緒逕サ�医°縺、謚倥j縺溘◆縺セ繧御クュ縺ョ蝣エ蜷医�謠冗判蛻�イ仙�逅�シ� 
    641596            node 
     
    643598                .duration(duration) 
    644599                .attr("cx", function(d) {return d.x;}) 
    645                 .attr("cy", function(d) {return d.y;}) 
    646                 .style("opacity", function(d){ 
    647                     var opa = 1.0; 
    648                     if(d.view == "hide"){ 
    649                         opa = 0.0; 
    650                     } 
    651                     return opa; 
    652                 }) 
    653                 .style("fill", function(d) { 
    654                     var fcolor = d.nodecolor; 
    655  
    656                     for(var n = 0; n < node.data().length; n++){ 
    657                         if(d.nodeid == node.data()[n].hideparent){ 
    658                             fcolor = "ffaaaa"; 
    659                         } 
    660                     } 
    661                     return fcolor; 
    662                 }) 
    663                 .style("pointer-events", function(d){ 
    664                     var pe = "auto"; 
    665                     if(d.view == "hide"){ 
    666                         pe = "none"; 
    667                     } 
    668                     return pe; 
    669                 }); 
     600                .attr("cy", function(d) {return d.y;}); 
    670601 
    671602            // 蜷�ヮ繝シ繝峨ユ繧ュ繧ケ繝医↓縺、縺�※險ュ螳壹&繧後◆菴咲スョ縺ォ蜀肴緒逕サ縲√ユ繧ュ繧ケ繝域緒逕サ菴咲スョ繧剃ク贋ク九↓謖ッ繧具シ医°縺、謚倥j縺溘◆縺セ繧御クュ縺ョ蝣エ蜷医�謠冗判蛻�イ仙�逅�シ� 
     
    683614                // 縺昴�蛟、繧帝ォ倥&縺ォ霑斐☆縺薙→縺ァ繝�く繧ケ繝域緒逕サ菴咲スョ縺御コ偵>驕輔>縺ォ縺ェ繧� 
    684615                return d.y + updown; 
    685             }) 
    686             // 謚倥j逡ウ縺ソ迥カ諷九↑繧峨ユ繧ュ繧ケ繝郁。ィ遉コ繧呈カ医☆ 
    687             .text(function(d){ 
    688                 var nodetext = d.name 
    689                 if(d.view == "hide"){ 
    690                     nodetext = ""; 
    691                 } 
    692                 return nodetext; 
    693616            }); 
     617 
     618            // 蜷�Μ繝ウ繧ッ繝�く繧ケ繝医↓縺、縺�※險ュ螳壹&繧後◆菴咲スョ縺ォ蜀肴緒逕サ 
     619            tlink 
     620                .transition() 
     621                .duration(duration) 
     622                .attr("x", function(d) {return (node.data()[d.source].x + node.data()[d.target].x) / 2;}) 
     623                .attr("y", function(d) {return ((node.data()[d.source].y + node.data()[d.target].y) / 2) + 5;}); 
    694624 
    695625        }; 
     
    723653                    return "#999"; 
    724654                }); 
     655 
     656            if(svg.attr("width") == width){ 
     657                    svg.attr("width", (width / 5)) 
     658                    .attr("height", (width * 9 / 16 / 5)) 
     659                    .attr("viewBox", "0 0 " + width + " " + (width * 9 / 16)); 
     660            }else{ 
     661                    svg.attr("width", width) 
     662                    .attr("height", height) 
     663                    .attr("viewBox", "0 0 " + width + " " + height); 
     664            } 
    725665 
    726666        }); 
     
    799739        // 蜈ア騾壹Ν繝シ繝亥愛螳壹rtrue縺ォ 
    800740        var isCommon = true; 
     741 
     742        var score = obj[i]['score']; 
    801743 
    802744        // classLinks縺ョ謨ー縺縺醍ケー繧願ソ斐@縺ェ縺後i 
     
    866808        } 
    867809        ret['nodes'][ret['nodes'].length - 1]['path'] = obj[i]; 
     810        ret['nodes'][ret['nodes'].length - 1]['score'] = score; 
    868811        ret['nodes'][ret['nodes'].length - 1]['nodecolor'] = '#8cddc0'; 
    869812        this.PATHNUM++;