チェンジセット 117 : BH13SPARQLBuilder/src/hozo/maptool

差分発生行の前後
無視リスト:
更新日時:
2014/07/07 16:52:51 (10 年 前)
更新者:
lenz
ログメッセージ:

選択したパスがわかりやすいようUIを工夫
アニメーション機能を使い選択されたパスの内容が読めるように変更

※間に非常に長い名前が含まれていた場合重なってしまい見えにくいので改修予定

ファイル:
1 変更

凡例:

変更なし
追加
削除
  • BH13SPARQLBuilder/src/hozo/maptool/jsgui.html

    r116 r117  
    2020        width: 200px; 
    2121        height: auto; 
    22         padding: 10px; 
     22        padding: 15px; 
    2323        -webkit-border-radius: 20px; 
    2424        border-radius: 20px; 
     
    7070var DRAWHEIGHT = 0; 
    7171var NODEHEIGHT = 50; 
     72var MOUSEMOVED = 0; 
    7273var jsontext = ""; 
    73  
    74  
    75 // 髢九>縺溘iview_map繝。繧ス繝�ラ繧貞他縺カ 
     74var DURATION = 0; 
     75 
     76 
     77// 髢九>縺溘i蜷�ィョ繧、繝ウ繧ソ繝シ繝輔ぉ繝シ繧ケ驛ィ蜩√�繧オ繧、繧コ繧貞、画峩縲√お繝ウ繝峨�繧、繝ウ繝井ク€隕ァ繧貞叙蠕励@繧サ繝�ヨ 
    7678$(window).load(function() { 
    77  
    78 // ZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZN 
    79 // ZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZN 
    8079 
    8180        var menuwidth = window.innerWidth + "px"; 
     
    102101        }); 
    103102 
    104 // ZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZN 
    105 // ZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZN 
    106  
    107103}); 
    108104 
     
    118114        set_map_location(0, json['nodes'], json['links']); 
    119115 
     116        // SVG縺ョ蟷�→鬮倥&繧定ィュ螳夲シ亥ケ�シ夂判髱「縺�▲縺ア縺�€€鬮倥&�壹ヱ繧ケ縺ョ謨ー縺ォ蠢懊§險ュ螳夲シ� 
    120117        var width = window.innerWidth; 
    121         var height = ((NODEHEIGHT * 1.5) * PATHNUM) + NODEHEIGHT; 
     118        var height = ((NODEHEIGHT * 1.5) * PATHNUM) + (NODEHEIGHT / 2); 
    122119 
    123120        // 繧ォ繝ゥ繝シ繧貞叙蠕� 
     
    128125                d3.select("#graph").select("svg").remove(); 
    129126        } 
     127        DURATION = 0; 
    130128 
    131129        // 繝峨Λ繝�げ譎ゅ�蜃ヲ逅� 
     
    135133 
    136134            d. isDrag = true; 
     135            DURATION = 0; 
    137136            redraw(); 
    138137        }); 
     
    142141            .attr("width", width) 
    143142            .attr("height", height); 
    144 /* 
    145         var bg = d3.select(".background") 
    146                 .enter() 
     143 
     144        // 閭梧勹縺ョ霑ス蜉 
     145        var bg = svg 
    147146                .append("rect") 
    148147                .attr("x", 0) 
     
    150149                .attr("width", width) 
    151150                .attr("height", height) 
    152                 .attr("fill", #999999); 
    153 */ 
     151                .attr("fill", "#fafafa"); 
     152 
     153        // 繝ェ繝ウ繧ッ縺ョ菴懈� 
    154154        var link = svg.selectAll(".link") 
    155155        .data(json.links) 
     
    158158        .style("stroke-width", function(d) { return Math.sqrt(d.value); }); 
    159159 
     160        // 繝弱�繝峨�菴懈� 
    160161        var node = svg.selectAll(".node") 
    161162        .data(json.nodes) 
     
    165166        .attr("cx", function(d) { return d.x;} ) 
    166167        .attr("cy",  function(d) { return d.y; }) 
    167         .style("stroke", function(d) { return '#ffffff'; }) 
     168        .style("stroke", function(d) { return '#fafafa'; }) 
    168169        .style("stroke-width", function(d) { return '1.5px'; }) 
    169170        .style("fill", function(d) { return color(d.group); }) 
     
    171172        .call(drag); 
    172173 
     174        // 繝弱�繝峨ユ繧ュ繧ケ繝医�菴懈� 
    173175        var tnode = svg.selectAll("text.node") 
    174176        .data(json.nodes) 
     
    185187        .call(drag); 
    186188 
     189        // 繝ェ繝ウ繧ッ繝�く繧ケ繝医�菴懈� 
    187190        var tlink = svg.selectAll("text.link") 
    188191        .data(json.links) 
     
    191194        .attr("x", function(d) { return (json.nodes[d.source].x + json.nodes[d.target].x) / 2; }) 
    192195        .attr("y", function(d) { return (json.nodes[d.source].y + json.nodes[d.target].y) / 2; }) 
    193         //.text(function(d) { return d.property; }) 
    194196        .style("fill", function(d) { return '#000000'; }) 
    195197        .style("text-anchor", function(d) { return 'middle'; }); 
    196198 
    197         // 繝弱�繝峨∈縺ョ繧ェ繝ウ繝槭え繧ケ縺ァ繝代せ謗「邏「 
     199        // 繝弱�繝峨∈縺ョ繧ッ繝ェ繝�け縺ァ繝代せ謗「邏「縲√ヱ繧ケ荳ュ縺ョ繝ェ繝ウ繧ッ譁�ュ励r陦ィ遉コ 
    198200        node.on("mouseover", function(d){ 
    199201 
    200                 if (!d. isDrag){ 
    201                         d3.selectAll(".node").style("stroke-width", function(d) { return '1.5px'; }); 
    202                         d3.selectAll(".node").style("stroke", function(d) { return '#ffffff'; }); 
    203                         d3.select(this).style("stroke-width", function(d) { return 2; }); 
    204                         d3.select(this).style("stroke", function(d) { return '#0000ff'; }); 
    205                 } 
    206  
    207                 d.isDrag = false; 
    208  
    209                 var path = []; 
    210                 pathname = []; 
    211  
    212                 if(d.nodeid != 0){ 
    213                         path.push(d.nodeid); 
    214                         pathname.push(d.name); 
    215                         do{ 
    216                                 for(var i = 0; i < link.data().length; i++){ 
    217                                         if(path[(path.length-1)] == link.data()[i].target){ 
    218                                                 path.push(link.data()[i].source); 
    219                                                 pathname.push(link.data()[i].property); 
    220                                                 pathname.push(node.data()[link.data()[i].source].name); 
     202                MOUSEMOVED = 0; 
     203 
     204                if(!d.isDrag){ 
     205 
     206                        var path = []; 
     207                        pathname = []; 
     208 
     209                        if(d.nodeid != 0){ 
     210                                path.push(d.nodeid); 
     211                                pathname.push(d.name); 
     212                                do{ 
     213                                        for(var i = 0; i < link.data().length; i++){ 
     214                                                if(path[(path.length-1)] == link.data()[i].target){ 
     215                                                        path.push(link.data()[i].source); 
     216                                                        pathname.push(link.data()[i].property); 
     217                                                        pathname.push(node.data()[link.data()[i].source].name); 
     218                                                } 
    221219                                        } 
    222                                 } 
    223                         }while(path[(path.length-1)] != 0); 
    224                         var resultText = "<h3>Selected Path</h3>"; 
    225                         for (var i = pathname.length;i > 0; i--){ 
    226                                 if(i % 2 == 1){ 
    227                                         resultText = resultText + "<span style=\"font-weight: bold;\">" + pathname[i - 1] + "</span><br><br>"; 
     220                                }while(path[(path.length-1)] != 0); 
     221                                var resultText = "<h3>Selected Path</h3>"; 
     222                                for (var i = pathname.length;i > 0; i--){ 
     223                                        if(i % 2 == 1){ 
     224                                                resultText = resultText + "<span style=\"font-weight: bold;\">" + pathname[i - 1] + "</span><br><br>"; 
     225                                        }else{ 
     226                                                resultText = resultText + pathname[i - 1] + "<br><br>"; 
     227                                        } 
     228                                } 
     229 
     230                                document.getElementById("selectpath").innerHTML=(resultText); 
     231                                document.getElementById("showpath").style.display = "block"; 
     232 
     233                                if(d.group > (MAXDEPTH - 2)){ 
     234                                        document.getElementById("getsparqlbutton").style.display = "block"; 
    228235                                }else{ 
    229                                         resultText = resultText + pathname[i - 1] + "<br><br>"; 
    230                                 } 
     236                                        document.getElementById("getsparqlbutton").style.display = "none"; 
     237                                } 
     238 
     239                                var xPosition = parseFloat(d3.select(this).attr("cx")) + parseFloat(d3.select(this).style("stroke-width")) + (NODEHEIGHT * 0.5); 
     240                                var yPosition = parseFloat(d3.select(this).attr("cy") - document.getElementById("showpath").offsetHeight + document.getElementById("menu").offsetHeight) + (NODEHEIGHT * 0.5); 
     241 
     242                                if(xPosition < 0){ 
     243                                        xPosition = 0; 
     244                                } 
     245                                if(yPosition < 0){ 
     246                                        yPosition = 0; 
     247                                } 
     248 
     249                                document.getElementById("showpath").style.left = xPosition + "px" 
     250                                document.getElementById("showpath").style.top = yPosition + "px" 
     251                                document.getElementById("showpath").style.display = "block"; 
     252 
     253                        }else{ 
     254                                document.getElementById("showpath").style.display = "none"; 
    231255                        } 
    232256 
    233                         document.getElementById("selectpath").innerHTML=(resultText); 
    234                         document.getElementById("showpath").style.display = "block"; 
    235  
    236                         if(d.group > (MAXDEPTH - 2)){ 
    237                                 document.getElementById("getsparqlbutton").style.display = "block"; 
    238                         }else{ 
    239                                 document.getElementById("getsparqlbutton").style.display = "none"; 
     257                        var movey = d.y; 
     258 
     259                        node 
     260                        .style("stroke", function(d){ 
     261                                var strokecolor = "#fafafa"; 
     262                                if(d.view == "now"){ 
     263                                        d.view = "no"; 
     264                                } 
     265                                if(d.view == "moved"){ 
     266                                        d.view = "clicked"; 
     267                                } 
     268 
     269                                if(d.view == "no"){ 
     270                                        for(var n = 0; n < path.length; n++){ 
     271                                                if(path[n] == d.nodeid){ 
     272                                                        strokecolor = "#ffaaaa"; 
     273                                                        d.view = "now"; 
     274                                                } 
     275                                        } 
     276                                }else if(d.view == "clicked"){ 
     277                                        strokecolor = "#ffaaaa"; 
     278                                        for(var n = 0; n < path.length; n++){ 
     279                                                if(path[n] == d.nodeid){ 
     280                                                        d.view = "moved"; 
     281                                                } 
     282                                        } 
     283                                } 
     284 
     285                                return strokecolor; 
     286                        }) 
     287                        .attr("cy", function(d){ 
     288                                if(d.view == "now" || d.view == "moved"){ 
     289                                        var curty = d.y; 
     290                                        d.y = movey; 
     291                                        return curty; 
     292                                }else{ 
     293                                        return d.y; 
     294                                } 
     295                        }); 
     296 
     297                        tlink 
     298                        .text(function(d) { 
     299                                var linktext = ""; 
     300                                if(d.view == "now"){ 
     301                                        d.view = "no"; 
     302                                } 
     303 
     304                                if(d.view == "no"){ 
     305                                        for(var t = 0; t < path.length; t++){ 
     306                                                if(path[t] == d.target){ 
     307                                                        linktext = d.property; 
     308                                                        d.view = "now"; 
     309                                                } 
     310                                        } 
     311                                }else if(d.view == "fix"){ 
     312                                        linktext = d.property; 
     313                                } 
     314                                return linktext; 
     315                        }); 
     316 
     317                        link 
     318                        .style("stroke", function(d){ 
     319                                if(d.view == "no"){ 
     320                                        return "#999"; 
     321                                }else{ 
     322                                        return "#ffaaaa"; 
     323                                } 
     324                        }); 
     325 
     326                        redraw(); 
     327                } 
     328 
     329        }).on("click", function(d){ 
     330 
     331                node 
     332                .style("stroke", function(d) { 
     333                        var strokecolor = "#fafafa" 
     334                        if(d.view == "now" || d.view == "clicked" || d.view == "moved"){ 
     335                                strokecolor = "#ffaaaa" 
     336                                d.view = "clicked"; 
    240337                        } 
    241  
    242                         var xPosition = parseFloat(d3.select(this).attr("cx")) + parseFloat(d3.select(this).style("stroke-width")) + (NODEHEIGHT * 0.5); 
    243                         var yPosition = parseFloat(d3.select(this).attr("cy") - document.getElementById("showpath").offsetHeight + document.getElementById("menu").offsetHeight) + (NODEHEIGHT * 0.5); 
    244  
    245                         if(xPosition < 0){ 
    246                                 xPosition = 0; 
    247                         } 
    248                         if(yPosition < 0){ 
    249                                 yPosition = 0; 
    250                         } 
    251  
    252                         document.getElementById("showpath").style.left = xPosition + "px" 
    253                         document.getElementById("showpath").style.top = yPosition + "px" 
    254                         document.getElementById("showpath").style.display = "block"; 
    255  
    256                 }else{ 
    257                         document.getElementById("showpath").style.display = "none"; 
    258                 } 
     338                        return strokecolor; 
     339                }); 
    259340 
    260341                tlink 
    261342                .text(function(d) { 
    262343                        var linktext = ""; 
    263                         for(var t = 0; t < path.length; t++){ 
    264                                 if(path[t] == d.target){ 
    265                                         linktext = d.property; 
    266                                 } 
     344                        if(d.view == "now" || d.view == "fix"){ 
     345                                linktext = d.property; 
     346                                d.view = "fix"; 
    267347                        } 
    268348                        return linktext; 
    269                 }) 
    270  
     349                }); 
     350 
     351        }).on("mouseout", function(d){ 
     352                d.isDrag = false; 
    271353        }); 
    272354 
     
    285367        var redraw = function (){ 
    286368                link 
     369                .transition() 
     370                .duration(DURATION) 
    287371                .attr("x1", function(d) {return node.data()[d.source].x;}) 
    288372                .attr("y1", function(d) {return node.data()[d.source].y;}) 
     
    291375 
    292376                tlink 
     377                .transition() 
     378                .duration(DURATION) 
    293379                .attr("x", function(d) {return (node.data()[d.source].x + node.data()[d.target].x) / 2;}) 
    294380                .attr("y", function(d) {return ((node.data()[d.source].y + node.data()[d.target].y) / 2) + 5;}); 
    295381 
    296382                node 
     383                .transition() 
     384                .duration(DURATION) 
    297385                .attr("cx", function(d) {return d.x;}) 
    298386                .attr("cy", function(d) {return d.y;}); 
    299387 
    300388                tnode 
     389                .transition() 
     390                .duration(DURATION) 
    301391                .attr("x", function(d) {return d.x;}) 
    302392                .attr("y", function(d) { 
     
    307397                        return d.y + updown; 
    308398                }); 
     399 
     400                DURATION = 500; 
    309401        }; 
    310402 
    311         svg.on("click", function() { 
     403        bg.on("click", function() { 
    312404                document.getElementById("showpath").style.display = "none"; 
    313405                d3.selectAll(".node").style("stroke-width", function(d) { return '1.5px'; }); 
    314406                d3.selectAll(".node").style("stroke", function(d) { return '#ffffff'; }); 
     407 
     408                node 
     409                .style("stroke", function(d){ 
     410                        d.view = "no"; 
     411                        return "#fafafa"; 
     412                }); 
     413 
    315414                tlink 
    316                 .text(""); 
     415                .text(function(d) { 
     416                        d.view = "no"; 
     417                        return ""; 
     418                }); 
     419 
     420                link 
     421                .style("stroke", function(d){ 
     422                        return "#999"; 
     423                }); 
     424 
     425        }); 
     426 
     427        bg.on("mousemove", function(){ 
     428                MOUSEMOVED++; 
     429                if(MOUSEMOVED > 30){ 
     430                        document.getElementById("showpath").style.display = "none"; 
     431                        MOUSEMOVED = 0; 
     432                } 
    317433        }); 
    318434 
     
    339455                if(i == 0){ 
    340456                        // 蛻晏屓縺縺代Ν繝シ繝医ヮ繝シ繝峨r繝励ャ繧キ繝・ 
    341                         ret['nodes'].push({'name':obj['paths'][0]['startClassURI'], 'group': 0, 'x':50, 'y':50, 'nodeid':ret['nodes'].length}); 
     457                        ret['nodes'].push({'name':obj['paths'][0]['startClassURI'], 'group': 0, 'x':50, 'y':50, 'nodeid':ret['nodes'].length, 'view' : 'no'}); 
    342458                } 
    343459                // 蜈医↓source縺ォ0�医Ν繝シ繝茨シ峨r莉」蜈・ 
     
    383499                                        if(!isCommonNow){ 
    384500                                                isCommon = false; 
    385                                                 ret['nodes'].push({'name':obj['paths'][i]['classLinks'][j]['linkedClassURI'], 'group': (j+1), 'x':0, 'y':0, 'nodeid':ret['nodes'].length}); 
    386                                                 ret['links'].push({'source':source, 'target':ret['nodes'].length - 1, 'value':5, 'property':obj['paths'][i]['classLinks'][j]['propertyURI']}); 
     501                                                ret['nodes'].push({'name':obj['paths'][i]['classLinks'][j]['linkedClassURI'], 'group': (j+1), 'x':0, 'y':0, 'nodeid':ret['nodes'].length, 'view' : 'no'}); 
     502                                                ret['links'].push({'source':source, 'target':ret['nodes'].length - 1, 'value':5, 'property':obj['paths'][i]['classLinks'][j]['propertyURI'], 'view' : 'no'}); 
    387503                                                source = ret['nodes'].length - 1; 
    388504                                        } 
     
    392508 
    393509                                        isCommon = false; 
    394                                         ret['nodes'].push({'name':obj['paths'][i]['classLinks'][j]['linkedClassURI'], 'group': (j+1), 'x':0, 'y':0, 'nodeid':ret['nodes'].length}); 
    395                                         ret['links'].push({'source':source, 'target':ret['nodes'].length - 1, 'value':5, 'property':obj['paths'][i]['classLinks'][j]['propertyURI']}); 
     510                                        ret['nodes'].push({'name':obj['paths'][i]['classLinks'][j]['linkedClassURI'], 'group': (j+1), 'x':0, 'y':0, 'nodeid':ret['nodes'].length, 'view' : 'no'}); 
     511                                        ret['links'].push({'source':source, 'target':ret['nodes'].length - 1, 'value':5, 'property':obj['paths'][i]['classLinks'][j]['propertyURI'], 'view' : 'no'}); 
    396512                                        source = ret['nodes'].length - 1; 
    397513                                } 
    398514                        // 譌「縺ォ蜈ア騾壹Ν繝シ繝医〒縺ェ縺�↑繧画眠隕剰ソス蜉縺励※谺。縺ク 
    399515                        }else{ 
    400                                 ret['nodes'].push({'name':obj['paths'][i]['classLinks'][j]['linkedClassURI'], 'group': (j+1), 'x':0, 'y':0, 'nodeid':ret['nodes'].length}); 
    401                                 ret['links'].push({'source':source, 'target':ret['nodes'].length - 1, 'value':5, 'property':obj['paths'][i]['classLinks'][j]['propertyURI']}); 
     516                                ret['nodes'].push({'name':obj['paths'][i]['classLinks'][j]['linkedClassURI'], 'group': (j+1), 'x':0, 'y':0, 'nodeid':ret['nodes'].length, 'view' : 'no'}); 
     517                                ret['links'].push({'source':source, 'target':ret['nodes'].length - 1, 'value':5, 'property':obj['paths'][i]['classLinks'][j]['propertyURI'], 'view' : 'no'}); 
    402518                                source = ret['nodes'].length - 1; 
    403519                        } 
     
    516632        if(sel == "input"){ 
    517633                sel = $("*[name=inputendpoint]").val(); 
    518                 alert(sel); 
    519634        } 
    520635 
     
    594709} 
    595710 
     711function sendSPARQL(){ 
     712        var ep = $("*[name=selectendpoint]").val(); 
     713 
     714        if(ep == "input"){ 
     715                ep = $("*[name=inputendpoint]").val(); 
     716        } 
     717 
     718        var query = $("*[name=sparql]").val(); 
     719 
     720        query = encodeURI(query); 
     721 
     722        openpage = ep + "sparql?format=text%2Fhtml&query=" + query; 
     723 
     724        window.open(openpage); 
     725} 
     726 
    596727// ZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZN 
    597728// ZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZN 
     
    603734<body> 
    604735 
    605 <div id="menu" style="position: absolute; overflow:hidden; top:0px; left:0px; width: 1000px; background-color: #cccccc;"> 
     736<div id="menu" style="position: absolute; overflow:hidden; top:0px; left:0px; width: 1000px; background-color: #eeeeee;"> 
    606737 
    607738        <div id="setting" style="margin: 15px; float: left;">