チェンジセット 102 : BH13SPARQLBuilder/src

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

メニューの位置等の変更
大量のパスが送られた際に備えツリー型に変更
オンマウスでパス情報の表示等細かなブラッシュアップ

ファイル:
1 変更

凡例:

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

    r92 r102  
    1818  stroke: #999; 
    1919  stroke-opacity: .6; 
     20} 
     21 
     22#showpath { 
     23        position: absolute; 
     24        width: 200px; 
     25        height: auto; 
     26        padding: 10px; 
     27        background-color: #aaccee; 
     28        -webkit-border-radius: 10px; 
     29        -moz-border-radius: 10px; 
     30        border-radius: 10px; 
     31        -webkit-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4); 
     32        -moz-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4); 
     33        box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4); 
    2034} 
    2135 
     
    5468 
    5569 
    56  
    57 // 謠冗判鬆伜沺縺ョ繧オ繧、繧コ 
    58 var WIDTH = window.innerWidth * 3 / 4; 
    59 var HEIGHT = window.innerWidth * 3 / 4; 
    6070var pathname = []; 
     71var PATHNUM = 0; 
    6172var MAXDEPTH = 0; 
     73var TREESPACE = 0; 
     74var DRAWHEIGHT = 0; 
    6275var jsontext = ""; 
     76 
    6377 
    6478// 髢九>縺溘iview_map繝。繧ス繝�ラ繧貞他縺カ 
     
    6882// ZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZN 
    6983 
    70         var rleft = (window.innerWidth * 3 / 4) + "px"; 
    71         var rwidth = (window.innerWidth / 4) - 50 + "px"; 
    72         document.getElementById("right").style.left = rleft; 
    73         document.getElementById("right").style.width = rwidth; 
    74         document.endpoint.inputendpoint.style.width = rwidth; 
    75         document.endpoint.selectendpoint.style.width = rwidth; 
    76         document.seclass.startclass.style.width = rwidth; 
    77         document.seclass.endclass.style.width = rwidth; 
    78         document.path.sparql.style.width = rwidth; 
     84        var menuwidth = window.innerWidth + "px"; 
     85        var inputswidth = ((window.innerWidth - 100) / 2) + "px"; 
     86        document.getElementById("menu").style.width = menuwidth; 
     87        document.endpoint.inputendpoint.style.width = inputswidth; 
     88        document.endpoint.selectendpoint.style.width = inputswidth; 
     89        document.seclass.startclass.style.width = inputswidth; 
     90        document.seclass.endclass.style.width = inputswidth; 
     91        document.path.sparql.style.width = inputswidth; 
     92        document.path.sendsparql.style.width = inputswidth; 
     93        document.getElementById("graph").style.top = document.getElementById("menu").offsetHeight + "px"; 
    7994 
    8095        $.ajax({ 
     
    93108// ZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZN 
    94109 
    95         //setEndpoints(jsonep); 
    96         // view_map(); 
    97110}); 
    98111 
     
    100113function view_map(){ 
    101114 
    102         // 豺ア縺輔r蜿門セ励€∵�遉コ逧�↓謨ー蛟、蛹� 
    103         var dep = 0;//$('#map_depth').val(); 
    104         //dep =  parseInt(dep, 10); 
    105  
    106 //http://jsdo.it/_shimizu/hszt 
    107 //http://www.h2.dion.ne.jp/~defghi/svgMemo/svgMemo_19.htm 
    108  
    109         // 豺ア縺輔r蠑墓焚縺ィ縺励※貂。縺励◆make_testdata繝。繧ス繝�ラ縺ョ邨先棡繧貞叙蠕� 
    110         var json = make_testdata(dep); 
     115        // make_data繝。繧ス繝�ラ縺ョ邨先棡繧貞叙蠕� 
     116        var json = make_data(0); 
     117        // 豺ア縺輔r蜿門セ� 
     118        var dep = MAXDEPTH; 
    111119 
    112120        // 蜃コ譚・荳翫′縺」縺溽オ先棡繧呈ク。縺励※繝槭ャ繝嶺ク翫�繝ュ繧ア繝シ繧キ繝ァ繝ウ繧偵そ繝�ヨ 
    113121        set_map_location(0, json['nodes'], json['links']); 
    114122 
    115         var width = WIDTH,縲€height = HEIGHT; 
    116  
    117         // 繧ォ繝ゥ繝シ繧貞叙蠕暦シ� 
     123        var width = window.innerWidth; 
     124        var height = TREESPACE * PATHNUM; 
     125 
     126        // 繧ォ繝ゥ繝シ繧貞叙蠕� 
    118127        var color = d3.scale.category20(); 
    119128 
    120         // svg縺悟ュ伜惠縺吶k縺ェ繧峨�蜑企勁�� 
     129        // SVG縺悟ュ伜惠縺吶k縺ェ繧峨�蜑企勁 
    121130        if (d3.select("#graph").select("svg")) { 
    122131                d3.select("#graph").select("svg").remove(); 
    123132        } 
    124133 
    125         // 繧上°繧峨〓 
     134        // 繝峨Λ繝�げ譎ゅ�蜃ヲ逅� 
    126135        var drag = d3.behavior.drag().on("drag", function(d,i) { 
    127136            d.x += d3.event.dx 
     
    132141        }); 
    133142 
     143        // SVG縺ョ霑ス蜉 
    134144        var svg = d3.select("#graph").append("svg") 
    135145            .attr("width", width) 
    136146            .attr("height", height); 
    137  
    138         var mc = new Array(); 
    139         for (var i=0; i<dep; i++){ 
    140                 mc.push((dep-i) * CIRCLE_SIZE); 
    141         } 
    142  
    143         var mapCircle = svg.selectAll(".mapCircle") 
    144         .data(mc) 
    145         .enter().append("circle") 
    146     .attr("class", "map") 
    147     .attr("r", function(d) { return d;}) 
    148     .attr("cx", function(d) { return (WIDTH/2);} ) 
    149     .attr("cy",  function(d) { return (HEIGHT/2); }) 
    150         .style("stroke-dasharray", ("5, 5")) 
    151         .style("fill", function(d) { return '#eeeeee'; }) 
    152         .style("stroke", function(d) { return '#000000'; }) 
    153         .style("opacity", 0.3); 
    154147 
    155148        var link = svg.selectAll(".link") 
     
    157150        .enter().append("line") 
    158151        .attr("class", "link") 
    159         .style("cursor", function(d) { return 'pointer'; }) 
    160152        .style("stroke-width", function(d) { return Math.sqrt(d.value); }); 
    161  
    162         var arrowname = new Array(); 
    163         if ($('#arrow_end').val() == 'true'){ // target譁ケ蜷代↓arrow縺ゅj 
    164                 arrowname.push('adr'); 
    165                 arrowname.push('adl'); 
    166         } 
    167  
    168         if ($('#arrow_start').val() == 'true'){ // source譁ケ蜷代↓arrow縺ゅj 
    169                 arrowname.push('asr'); 
    170                 arrowname.push('asl'); 
    171         } 
    172  
    173         var arrows = []; 
    174  
    175         for (var i=0; i<arrowname.length; i++){ 
    176                 arrows[arrowname[i]] = svg.selectAll("arrow.link") 
    177                 .data(json.links) 
    178                 .enter().append("line") 
    179                 .attr("class", "link"); 
    180         } 
    181  
    182         var tlink = svg.selectAll("text.link") 
    183         .data(json.links) 
    184         .enter().append("svg:text") 
    185         .attr("class", "tlink") 
    186         .attr("x", function(d) { 
    187                 return (json.nodes[d.source].x + json.nodes[d.target].x) / 2; 
    188         }) 
    189         .attr("y", function(d) { return (json.nodes[d.source].y + json.nodes[d.target].y) / 2; }) 
    190         .text(function(d) { return d.property; }) // TODO 繝ェ繝ウ繧ッ譁�ュ� 
    191         .style("fill", function(d) { return '#ffffff'; }) 
    192         .style("stroke", function(d) { return '#000000'; }) 
    193         .style("text-anchor", function(d) { return 'middle'; }); 
    194153 
    195154        var node = svg.selectAll(".node") 
     
    217176        .style("stroke-width", function(d) { return '1.5px'; }) 
    218177        .style("text-anchor", function(d) { return 'middle'; }) 
     178        .style("pointer-events", "none") 
    219179        .call(drag); 
    220180 
    221         /* 
    222         node.append("title") 
    223         .text(function(d) { return d.name; }); 
    224         */ 
    225  
    226         // 繝ェ繝ウ繧ッ繧ッ繝ェ繝�け縺ァ驕ク謚� 
    227         link.on("click", function(d){ 
    228                 d3.selectAll(".link").style("stroke-width", function(d) { return Math.sqrt(d.value); }); 
    229                 d3.select(this).style("stroke-width", function(d) { return 10; }); 
    230         }); 
    231  
    232         // 繝弱�繝峨け繝ェ繝�け縺ァ驕ク謚� 
     181        var tlink = svg.selectAll("text.link") 
     182        .data(json.links) 
     183        .enter().append("svg:text") 
     184        .attr("class", "tlink") 
     185        .attr("x", function(d) { return (json.nodes[d.source].x + json.nodes[d.target].x) / 2; }) 
     186        .attr("y", function(d) { return (json.nodes[d.source].y + json.nodes[d.target].y) / 2; }) 
     187        //.text(function(d) { return d.property; }) 
     188        .style("fill", function(d) { return '#000000'; }) 
     189        .style("text-anchor", function(d) { return 'middle'; }); 
     190 
     191        // 繝弱�繝峨∈縺ョ繧ェ繝ウ繝槭え繧ケ縺ァ繝代せ謗「邏「 
    233192        node.on("mouseover", function(d){ 
    234  
    235 // ZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZN 
    236 // ZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZN 
    237193 
    238194                var path = []; 
     
    246202                                        pathname.push(link.data()[i].property); 
    247203                                        pathname.push(node.data()[link.data()[i].source].name); 
    248                                         //alert(tnode.data()[link.data()[i].source].fill);//style("stroke", function(d) { return '#ff0000'; }); 
    249204                                } 
    250205                        } 
    251206                }while(path[(path.length-1)] != 0); 
    252                 var resultText = ""; 
    253                 for (var i = 0;i < pathname.length; i++){ 
    254                         resultText = resultText + pathname[i] + "<br><br>"; 
     207                var resultText = "<h3>Selected Path</h3>"; 
     208                for (var i = pathname.length;i > 0; i--){ 
     209                        if(i % 2 == 1){ 
     210                                resultText = resultText + "<span style=\"font-weight: bold;\">" + pathname[i - 1] + "</span><br><br>"; 
     211                        }else{ 
     212                                resultText = resultText + pathname[i - 1] + "<br><br>"; 
     213                        } 
    255214                } 
    256215                document.getElementById("selectpath").innerHTML=(resultText); 
    257                 document.getElementById("sendpath").style.display = "block"; 
     216                document.getElementById("showpath").style.display = "block"; 
     217 
     218                var xPosition = parseFloat(d3.select(this).attr("cx")) + 22; 
     219                var yPosition = parseFloat(d3.select(this).attr("cy") - document.getElementById("showpath").offsetHeight + document.getElementById("menu").offsetHeight) + 22; 
     220 
     221                if(xPosition < 0){ 
     222                        xPosition = 0; 
     223                } 
     224                if(yPosition < 0){ 
     225                        yPosition = 0; 
     226                } 
     227 
     228                document.getElementById("showpath").style.left = xPosition + "px" 
     229                document.getElementById("showpath").style.top = yPosition + "px" 
     230                document.getElementById("showpath").style.display = "block"; 
     231 
     232                tlink 
     233                .text(function(d) { 
     234                        var linktext = ""; 
     235                        for(var t = 0; t < path.length; t++){ 
     236                                if(path[t] == d.target){ 
     237                                        linktext = d.property; 
     238                                } 
     239                        } 
     240                        return linktext; 
     241                }) 
    258242 
    259243            if (!d. isDrag){ 
     
    261245                        d3.selectAll(".node").style("stroke", function(d) { return '#ffffff'; }); 
    262246                        d3.select(this).style("stroke-width", function(d) { return 2; }); 
    263                         d3.select(this).style("stroke", function(d) { return '#ff0000'; }); 
     247                        d3.select(this).style("stroke", function(d) { return '#0000ff'; }); 
    264248            } 
    265249 
    266 // ZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZN 
    267 // ZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZN 
    268  
    269250            d.isDrag = false; 
    270         }); 
    271  
    272         // 逕サ髱「繧ッ繝ェ繝�け縺ァ繝ェ繝ウ繧ッ驕ク謚櫁ァ」髯、 
    273         mapCircle.on("click", function(d){ 
    274                 d3.selectAll(".node").style("stroke-width", function(d) { return '1.5px'; }); 
    275                 d3.selectAll(".node").style("stroke", function(d) { return '#ffffff'; }); 
    276                 d3.selectAll(".link").style("stroke-width", function(d) { return Math.sqrt(d.value); }); 
    277251        }); 
    278252 
     
    298272                tlink 
    299273                .attr("x", function(d) {return (node.data()[d.source].x + node.data()[d.target].x) / 2;}) 
    300                 .attr("y", function(d) {return (node.data()[d.source].y + node.data()[d.target].y) / 2;}); 
     274                .attr("y", function(d) {return ((node.data()[d.source].y + node.data()[d.target].y) / 2) + 5;}); 
    301275 
    302276                node 
     
    306280                tnode 
    307281                .attr("x", function(d) {return d.x;}) 
    308                 .attr("y", function(d) {return d.y;}); 
    309  
    310                 if (arrows['adr'] != undefined){ 
    311                         arrows['adr'] 
    312                     .attr("x1", function(d) {return (node.data()[d.target].x - vec(node.data()[d.source].x, node.data()[d.source].y, node.data()[d.target].x, node.data()[d.target].y).x * 30);}) 
    313                 .attr("y1", function(d) {return (node.data()[d.target].y - vec(node.data()[d.source].x, node.data()[d.source].y, node.data()[d.target].x, node.data()[d.target].y).y * 30);}) 
    314                 .attr("x2", function(d) {return node.data()[d.target].x;}) 
    315                 .attr("y2", function(d) {return node.data()[d.target].y;}) 
    316                 .attr("transform", function(d) { 
    317                         return 'rotate(25, ' 
    318                                         + (node.data()[d.target].x - vec(node.data()[d.source].x, node.data()[d.source].y, node.data()[d.target].x, node.data()[d.target].y).x * 20) + ', ' 
    319                                         + (node.data()[d.target].y - vec(node.data()[d.source].x, node.data()[d.source].y, node.data()[d.target].x, node.data()[d.target].y).y * 20) + ')';}); 
    320                     } 
    321  
    322                 if (arrows['adl'] != undefined){ 
    323                     arrows['adl'] 
    324                     .attr("x1", function(d) {return (node.data()[d.target].x - vec(node.data()[d.source].x, node.data()[d.source].y, node.data()[d.target].x, node.data()[d.target].y).x * 30);}) 
    325                 .attr("y1", function(d) {return (node.data()[d.target].y - vec(node.data()[d.source].x, node.data()[d.source].y, node.data()[d.target].x, node.data()[d.target].y).y * 30);}) 
    326                 .attr("x2", function(d) {return node.data()[d.target].x;}) 
    327                 .attr("y2", function(d) {return node.data()[d.target].y;}) 
    328                 .attr("transform", function(d) { 
    329                         return 'rotate(-25, ' 
    330                                 + (node.data()[d.target].x - vec(node.data()[d.source].x, node.data()[d.source].y, node.data()[d.target].x, node.data()[d.target].y).x * 20) + ', ' 
    331                                 + (node.data()[d.target].y - vec(node.data()[d.source].x, node.data()[d.source].y, node.data()[d.target].x, node.data()[d.target].y).y * 20) + ')';}); 
    332                 } 
    333  
    334                 if (arrows['asr'] != undefined){ 
    335                     arrows['asr'] 
    336                     .attr("x1", function(d) {return node.data()[d.source].x;}) 
    337                     .attr("y1", function(d) {return node.data()[d.source].y;}) 
    338                     .attr("x2", function(d) {return (node.data()[d.source].x + vec(node.data()[d.source].x, node.data()[d.source].y, node.data()[d.target].x, node.data()[d.target].y).x * 30);}) 
    339                     .attr("y2", function(d) {return (node.data()[d.source].y + vec(node.data()[d.source].x, node.data()[d.source].y, node.data()[d.target].x, node.data()[d.target].y).y * 30);}) 
    340                 .attr("transform", function(d) { 
    341                         return 'rotate(25, ' 
    342                                         + (node.data()[d.source].x + vec(node.data()[d.source].x, node.data()[d.source].y, node.data()[d.target].x, node.data()[d.target].y).x * 20) + ', ' 
    343                                         + (node.data()[d.source].y + vec(node.data()[d.source].x, node.data()[d.source].y, node.data()[d.target].x, node.data()[d.target].y).y * 20) + ')';}); 
    344                 } 
    345  
    346                 if (arrows['asl'] != undefined){ 
    347                     arrows['asl'] 
    348                     .attr("x1", function(d) {return node.data()[d.source].x;}) 
    349                 .attr("y1", function(d) {return node.data()[d.source].y;}) 
    350                 .attr("x2", function(d) {return (node.data()[d.source].x + vec(node.data()[d.source].x, node.data()[d.source].y, node.data()[d.target].x, node.data()[d.target].y).x * 30);}) 
    351                 .attr("y2", function(d) {return (node.data()[d.source].y + vec(node.data()[d.source].x, node.data()[d.source].y, node.data()[d.target].x, node.data()[d.target].y).y * 30);}) 
    352                 .attr("transform", function(d) { 
    353                         return 'rotate(-25, ' 
    354                                 + (node.data()[d.source].x + vec(node.data()[d.source].x, node.data()[d.source].y, node.data()[d.target].x, node.data()[d.target].y).x * 20) + ', ' 
    355                                 + (node.data()[d.source].y + vec(node.data()[d.source].x, node.data()[d.source].y, node.data()[d.target].x, node.data()[d.target].y).y * 20) + ')';}); 
    356             } 
     282                .attr("y", function(d) { 
     283                        var updown = 18; 
     284                        if(d.group % 2 == 1){ 
     285                                updown = -8; 
     286                        } 
     287                        return d.y + updown; 
     288                }); 
    357289        }; 
    358 /* 
    359         svg.on("mousemove", function() { 
    360                 redraw(); 
     290 
     291        svg.on("click", function() { 
     292                document.getElementById("showpath").style.display = "none"; 
     293                d3.selectAll(".node").style("stroke-width", function(d) { return '1.5px'; }); 
     294                d3.selectAll(".node").style("stroke", function(d) { return '#ffffff'; }); 
     295                tlink 
     296                .text(""); 
    361297        }); 
    362 */ 
     298 
    363299        redraw(); 
    364300} 
    365301 
    366 // 繝�せ繝医ョ繝シ繧ソ縺ョ菴懈�繝。繧ス繝�ラ 
    367 function make_testdata(tdepth, ret, parent, depth){ 
    368         // ret縲‥epth縺梧悴螳夂セゥ縺ェ繧峨�螳夂セゥ縺励※莉」蜈・ 
     302// 繝�繧ソ縺ョ菴懈�繝。繧ス繝�ラ 
     303function make_data(tdepth, ret, parent, depth){ 
     304        // ret縺梧悴螳夂セゥ縺ェ繧峨�螳夂セゥ縺励※莉」蜈・ 
    369305        if (ret == undefined){ 
    370306                ret = new Object(); 
     
    372308                ret['links'] = new Array(); 
    373309        } 
    374         /* 
    375         if (depth == undefined){ 
    376                 depth = 0; 
    377         } 
    378  
    379         // name縺ォaaaa縲“roup縺ォ豺ア縺輔€』縺ィy縺ォ蟷�→鬮倥&縺ョ蜊雁�繧偵そ繝�ヨ縺溶odes驟榊�縺ォ霑ス蜉 
    380         ret['nodes'].push({'name':'aaaa', 'group': depth, 'x':(WIDTH/2), 'y':(HEIGHT/2)}); 
    381         // 迴セ蝨ィ縺ョnodes縺ョ謨ー縺ォ蠢懊§縺櫑ndex繧堤函謌� 
    382         var newIndex = ret['nodes'].length-1; 
    383  
    384         // parent縺梧悴螳夂セゥ縺ァ縺ェ縺代l縺ーlinks驟榊�縺ォsource繧恥arent縲》arget繧地ewIndex縺ィ螳夂セゥ縺励※莉」蜈・ 
    385         if (parent != undefined){ 
    386                 ret['links'].push({'source':parent, 'target':newIndex, 'value':5}); 
    387         } 
    388  
    389         // 謖�ョ壹&繧後◆豺ア縺輔↓閾ウ縺」縺ヲ縺�↑縺代l縺ー 
    390         if (tdepth > depth){ 
    391                 // 繝ゥ繝ウ繝€繝縺ァ譛€螟ァ蝗帙▽縺セ縺ァ縺ョ謨ー繧堤函謌舌€∝�蠎ヲ縺薙�繝。繧ス繝�ラ繧貞他縺カ 
    392                 // 縺薙%縺碁�ャ。蜻シ縺ー繧後※荳€谿オ縺ョ豺ア縺輔#縺ィ縺ォ譛€螟ァ蝗帙▽縺ョ蟄舌r謖√▽繝ゥ繝ウ繝€繝縺ョ讒矩€縺後〒縺阪≠縺後k 
    393                 var c = Math.random()*4; 
    394                 for (var i=0; i<c; i++){ 
    395                         ret = make_testdata(tdepth, ret, newIndex, depth+1); 
    396                 } 
    397         } 
    398         */ 
     310 
     311        PATHNUM = 0; 
     312        MAXDEPTH = 0; 
     313        TREESPACE = 0; 
     314        DRAWHEIGHT = 0; 
    399315 
    400316        var obj = JSON.parse(jsontext); 
    401  
    402317        // obj繝医ャ繝鈴嚴螻、縺ョ謨ー縺縺醍ケー繧願ソ斐@縺ェ縺後i 
    403318        for(var i = 0; i < obj['paths'].length; i++){ 
     
    417332                                MAXDEPTH = j+1; 
    418333                        } 
    419  
    420334                        // 縺薙%縺セ縺ァ蜈ア騾壹Ν繝シ繝医↑繧� 
    421335                        if(isCommon){ 
     
    449363                                        if(!isCommonNow){ 
    450364                                                isCommon = false; 
    451                                                 ret['nodes'].push({'name':obj['paths'][i]['classLinks'][j]['linkedClassURI'], 'group': (j+1), 'x':(WIDTH/2), 'y':(HEIGHT/2), 'nodeid':ret['nodes'].length}); 
     365                                                ret['nodes'].push({'name':obj['paths'][i]['classLinks'][j]['linkedClassURI'], 'group': (j+1), 'x':0, 'y':0, 'nodeid':ret['nodes'].length}); 
    452366                                                ret['links'].push({'source':source, 'target':ret['nodes'].length - 1, 'value':5, 'property':obj['paths'][i]['classLinks'][j]['propertyURI']}); 
    453367                                                source = ret['nodes'].length - 1; 
     
    458372 
    459373                                        isCommon = false; 
    460                                         ret['nodes'].push({'name':obj['paths'][i]['classLinks'][j]['linkedClassURI'], 'group': (j+1), 'x':(WIDTH/2), 'y':(HEIGHT/2), 'nodeid':ret['nodes'].length}); 
     374                                        ret['nodes'].push({'name':obj['paths'][i]['classLinks'][j]['linkedClassURI'], 'group': (j+1), 'x':0, 'y':0, 'nodeid':ret['nodes'].length}); 
    461375                                        ret['links'].push({'source':source, 'target':ret['nodes'].length - 1, 'value':5, 'property':obj['paths'][i]['classLinks'][j]['propertyURI']}); 
    462376                                        source = ret['nodes'].length - 1; 
     
    464378                        // 譌「縺ォ蜈ア騾壹Ν繝シ繝医〒縺ェ縺�↑繧画眠隕剰ソス蜉縺励※谺。縺ク 
    465379                        }else{ 
    466                                 ret['nodes'].push({'name':obj['paths'][i]['classLinks'][j]['linkedClassURI'], 'group': (j+1), 'x':(WIDTH/2), 'y':(HEIGHT/2), 'nodeid':ret['nodes'].length}); 
     380                                ret['nodes'].push({'name':obj['paths'][i]['classLinks'][j]['linkedClassURI'], 'group': (j+1), 'x':0, 'y':0, 'nodeid':ret['nodes'].length}); 
    467381                                ret['links'].push({'source':source, 'target':ret['nodes'].length - 1, 'value':5, 'property':obj['paths'][i]['classLinks'][j]['propertyURI']}); 
    468382                                source = ret['nodes'].length - 1; 
     
    470384 
    471385                } 
    472  
    473         } 
    474  
    475         /* 
    476  
    477         ret['nodes'].push({'name':jsontoobj['startClassURI'], 'group': 0, 'x':50, 'y':50}); 
    478         ret['nodes'].push({'name':jsontoobj['classLinks'][0]['linkedClassURI'], 'group': 1, 'x':(WIDTH/2), 'y':(HEIGHT/2)}); 
    479         ret['nodes'].push({'name':jsontoobj['classLinks'][1]['linkedClassURI'], 'group': 2, 'x':(WIDTH/2), 'y':(HEIGHT/2)}); 
    480  
    481         ret['links'].push({'source':0, 'target':1, 'value':5, 'property':jsontoobj['classLinks'][0]['propertyURI']}); 
    482         ret['links'].push({'source':1, 'target':2, 'value':5, 'property':jsontoobj['classLinks'][1]['propertyURI']}); 
    483  
    484         ret['nodes'].push({'name':'root', 'group': 0, 'x':50, 'y':50}); 
    485         ret['nodes'].push({'name':'a', 'group': 1, 'x':(WIDTH/2), 'y':(HEIGHT/2)}); 
    486         ret['nodes'].push({'name':'b', 'group': 1, 'x':(WIDTH/2), 'y':(HEIGHT/2)}); 
    487         ret['nodes'].push({'name':'c', 'group': 1, 'x':(WIDTH/2), 'y':(HEIGHT/2)}); 
    488         ret['nodes'].push({'name':'a1', 'group': 2, 'x':(WIDTH/2), 'y':(HEIGHT/2)}); 
    489         ret['nodes'].push({'name':'a2', 'group': 2, 'x':(WIDTH/2), 'y':(HEIGHT/2)}); 
    490         ret['nodes'].push({'name':'b1', 'group': 2, 'x':(WIDTH/2), 'y':(HEIGHT/2)}); 
    491         ret['nodes'].push({'name':'c1', 'group': 2, 'x':(WIDTH/2), 'y':(HEIGHT/2)}); 
    492         ret['nodes'].push({'name':'c2', 'group': 2, 'x':(WIDTH/2), 'y':(HEIGHT/2)}); 
    493         ret['nodes'].push({'name':'c3', 'group': 2, 'x':(WIDTH/2), 'y':(HEIGHT/2)}); 
    494         ret['nodes'].push({'name':'a11', 'group': 3, 'x':(WIDTH/2), 'y':(HEIGHT/2)}); 
    495         ret['nodes'].push({'name':'a12', 'group': 3, 'x':(WIDTH/2), 'y':(HEIGHT/2)}); 
    496         ret['nodes'].push({'name':'a21', 'group': 3, 'x':(WIDTH/2), 'y':(HEIGHT/2)}); 
    497         ret['nodes'].push({'name':'c21', 'group': 3, 'x':(WIDTH/2), 'y':(HEIGHT/2)}); 
    498         ret['nodes'].push({'name':'c21', 'group': 3, 'x':(WIDTH/2), 'y':(HEIGHT/2)}); 
    499         ret['nodes'].push({'name':'c23', 'group': 3, 'x':(WIDTH/2), 'y':(HEIGHT/2)}); 
    500  
    501         ret['links'].push({'source':0, 'target':1, 'value':5}); 
    502         ret['links'].push({'source':0, 'target':2, 'value':5}); 
    503         ret['links'].push({'source':0, 'target':3, 'value':5}); 
    504         ret['links'].push({'source':1, 'target':4, 'value':5}); 
    505         ret['links'].push({'source':1, 'target':5, 'value':5}); 
    506         ret['links'].push({'source':2, 'target':6, 'value':5}); 
    507         ret['links'].push({'source':3, 'target':7, 'value':5}); 
    508         ret['links'].push({'source':3, 'target':8, 'value':5}); 
    509         ret['links'].push({'source':3, 'target':9, 'value':5}); 
    510         ret['links'].push({'source':4, 'target':10, 'value':5}); 
    511         ret['links'].push({'source':4, 'target':11, 'value':5}); 
    512         ret['links'].push({'source':5, 'target':12, 'value':5}); 
    513         ret['links'].push({'source':8, 'target':13, 'value':5}); 
    514         ret['links'].push({'source':8, 'target':14, 'value':5}); 
    515         ret['links'].push({'source':8, 'target':15, 'value':5}); 
    516         */ 
     386                PATHNUM++; 
     387        } 
     388        TREESPACE = (window.innerWidth - 200) / (MAXDEPTH + 1); 
     389        DRAWHEIGHT = TREESPACE / 2; 
    517390 
    518391        // 縺ァ縺阪◆邨先棡繧定ソ斐☆ 
    519392        return ret; 
    520 } 
    521  
    522 function make_json(data){ 
    523  
    524         var ret = new Object(); 
    525         ret['nodes'] = new Array(); 
    526         ret['links'] = new Array(); 
    527  
    528         for (var d=0; d<data.length; d++){ 
    529                 var label = data[d].label; 
    530                 var session = data[d].p; 
    531                 var link = data[d].o; 
    532  
    533                 var centerIndex = get_item_index(ret['nodes'], label, 1); 
    534                 var sessionIndex = get_item_index(ret['nodes'], get_resource_label(session), 2); 
    535                 var linkIndex = get_item_index(ret['nodes'], get_resource_label(link), d + 3); 
    536  
    537                 add_link(ret['links'], centerIndex, sessionIndex, 10); 
    538                 add_link(ret['links'], sessionIndex, linkIndex, 1); 
    539         } 
    540  
    541         set_map_location(0, ret['nodes'], ret['links']); 
    542  
    543  
    544         return ret; 
    545 } 
    546  
    547 function get_resource_label(resource){ 
    548         var i = resource.lastIndexOf('/'); 
    549         var ret = resource; 
    550         if (i > 0){ 
    551                 ret = resource.substring(i + '/'.length); 
    552         } 
    553         ret = ret.replace(/%20/g, " "); 
    554         return ret; 
    555 } 
    556  
    557 function get_item_index(item, label, group){ 
    558         for (var i=0; i<item.length; i++){ 
    559                 if (item[i].name == label){ 
    560                         return i; 
    561                 } 
    562         } 
    563  
    564         // TODO 蠎ァ讓呎アコ螳壹Ο繧ク繝�け繧剃ス懈�縺吶k 
    565         item.push({'name':label, 'group': group, 'x':(WIDTH/2), 'y':(HEIGHT/2)}); 
    566  
    567         return item.length-1; 
    568 } 
    569  
    570 function add_link(links, source, dest, value){ 
    571         for (var i=0; i<links.length; i++){ 
    572                 if (links[i].source == source && links[i].target == dest){ 
    573                         return; 
    574                 } 
    575         } 
    576         links.push({'source':source, 'target':dest, 'value':value}); 
    577  
    578         return; 
    579393} 
    580394 
     
    586400                depth = 0; 
    587401        } 
     402/* 
    588403        // fromAngle縺梧悴螳夂セゥ縺ェ繧峨�0繧偵そ繝�ヨ 
    589404        if (fromAngle == undefined){ 
     
    594409                toAngle = 1; 
    595410        } 
     411*/ 
    596412 
    597413        // 蜷�ィョ蛻晄悄蛹� 
     
    619435        } 
    620436 
    621  
     437        if(myNodeIndex != 0){ 
     438                DRAWHEIGHT += (TREESPACE / 2); 
     439                var x = (depth * TREESPACE) + (TREESPACE / 2); 
     440                var y = DRAWHEIGHT; 
     441                nodes[myNodeIndex].x = x; 
     442                nodes[myNodeIndex].y = y; 
     443        }else{ 
     444                var x = TREESPACE / 2; 
     445                var y = (TREESPACE / 2) * (PATHNUM / 2) + (TREESPACE / 4); 
     446                nodes[myNodeIndex].x = x; 
     447                nodes[myNodeIndex].y = y; 
     448        } 
     449 
     450        /* 
    622451        var x = (WIDTH/2) + depth * (WIDTH / (MAXDEPTH * 2 + 1)) * Math.sin(2 * 3.14 * ((toAngle + fromAngle) / 2)); 
    623452        var y = (HEIGHT/2) + depth * (HEIGHT / (MAXDEPTH * 2 + 1)) * Math.cos(2 * 3.14 * ((toAngle + fromAngle) / 2)); 
     
    625454        nodes[myNodeIndex].y = y; 
    626455 
    627  
     456        CIRCLE_SIZE = (WIDTH / (MAXDEPTH * 2 + 1)); 
     457        */ 
    628458 
    629459        children = get_children(myNodeIndex, links); 
    630460 
    631461        for (var i=0; i<children.length; i++){ 
     462                if(i == 0){ 
     463                        DRAWHEIGHT -= (TREESPACE / 2); 
     464                } 
    632465                var child = children[i]; 
    633466                set_map_location(child, nodes, links, depth+1, fromAngle + ((toAngle - fromAngle) / children.length) * i, fromAngle + ((toAngle - fromAngle) / children.length) * (i+1)); 
     
    730563                success : function(sparql) { 
    731564                        document.path.sparql.value = sparql; 
     565                        document.getElementById("showpath").style.display = "none"; 
     566                        window.scrollTo(0, 0); 
    732567                }, 
    733568                error : function(XMLHttpRequest, textStatus, errorThrown) { 
     
    746581<body> 
    747582 
    748 <div id="graph"> 
    749 </div> 
    750 <div id="right" style="position: absolute; top:0px; left:0px; width:200px; padding: 20px; background-color: #cccccc;"> 
    751  
    752         <div id="endpoint"> 
    753                 <form name="endpoint"> 
    754                         <input type="text" style="width: 200px;" name="inputendpoint"> 
    755                         <select size=1 name="selectendpoint" style="width: 200px;"> 
    756                                 <option value="input">Textbox 
    757                         </select> 
    758                         <input type="button" name="setendpoint" value="SetEndPoint" onClick="setEndpoint()"> 
    759                 </form> 
     583<div id="menu" style="position: absolute; overflow:hidden; top:0px; left:0px; width: 1000px; background-color: #cccccc;"> 
     584 
     585        <div id="setting" style="margin: 15px; float: left;"> 
     586                <div id="endpoint"> 
     587                        <form name="endpoint"> 
     588                                <input type="text" style="width: 200px;" name="inputendpoint"><br> 
     589                                <select size=1 name="selectendpoint" style="width: 200px;"> 
     590                                        <option value="input">Textbox 
     591                                </select><br> 
     592                                <input type="button" name="setendpoint" value="SetEndPoint" onClick="setEndpoint()"> 
     593                        </form> 
     594                </div> 
     595                <div id="seclass" style="margin-top: 30px;"> 
     596                        <form name="seclass"> 
     597                                StartClass<br> 
     598                                <select size=1 name="startclass" style="width: 200px;"> 
     599                                </select><br> 
     600                                EndClass<br> 
     601                                <select size=1 name="endclass" style="width: 200px;"> 
     602                                </select><br> 
     603                                <input type="button" name="setclass" value="SetClass" onClick="setSEClass()"> 
     604                        </form> 
     605                </div> 
    760606        </div> 
    761         <div id="seclass" style="margin: 15px 0px; display: none;"> 
    762                 <form name="seclass"> 
    763                         StartClass<br> 
    764                         <select size=1 name="startclass" style="width: 200px;"> 
    765                         </select> 
    766                         EndClass<br> 
    767                         <select size=1 name="endclass" style="width: 200px;"> 
    768                         </select> 
    769                         <input type="button" name="setclass" value="SetClass" onClick="setSEClass()"> 
    770                 </form> 
    771                 <hr> 
    772         </div> 
    773         <div id="selectpath" style="word-wrap: break-word;"> 
    774         </div> 
    775         <div id="sendpath" style="display: none;"> 
    776                 <hr> 
     607 
     608        <div id="editing" style="margin: 15px 25px; float: right;"> 
    777609                <form name="path"> 
    778                         <input type="button" name="getsparql" value="Get SPARQL" onClick="getSPARQL()"> 
    779                         <textarea name="sparql" style="width: 200px; height: 200px;"></textarea><br><br> 
    780                         <input type="button" name="sendsparql" value="Send SPARQL" onClick="sendSPARQL()"> 
     610                        <textarea name="sparql" style="width: 300px; height: 180px;"></textarea><br> 
     611                        <input type="button" name="sendsparql" value="Send SPARQL" onClick="sendSPARQL()"><br> 
    781612                </form> 
    782613        </div> 
    783614</div> 
     615<div id="graph" style="position: absolute; top:0px; left:0px;"> 
     616</div> 
     617<div id="showpath" style="display: none;"> 
     618        <div id="selectpath" style="word-wrap: break-word;"> 
     619        </div> 
     620        <input type="button" name="getsparql" value="Get SPARQL" onClick="getSPARQL()"> 
     621</div> 
    784622</body> 
    785623</html>