チェンジセット 183 : SPARQLBuilderWWW/web

差分発生行の前後
無視リスト:
更新日時:
2014/09/26 17:21:50 (10 年 前)
更新者:
lenz
ログメッセージ:

EndPointのテキストボックス入力を廃止
Ajaxでの読み込み中を示すUIの追加
結果取得されたパスの数の表示機能を追加
パスの数が多い場合に描画を制限し、必要に応じ全て描画する形に変更
ノードクリックでの畳み込み処理を廃止
ツールチップの位置がおかしくなるバグの改修

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

凡例:

変更なし
追加
削除
  • SPARQLBuilderWWW/web/jsgui.html

    r170 r183  
    6868// 霑斐☆繝代せ縺ョ繧ェ繝悶ず繧ァ繧ッ繝� 
    6969var pathobj = []; 
     70// 陦ィ遉コ縺吶k繝代せ縺ョ謨ー 
     71var pathlimit = 10; 
    7072 
    7173// 騾√i繧後◆繝代せ縺ョ謨ー 
     
    9294        // 縺昴l縺槭l縺ォ繧サ繝�ヨ 
    9395        document.getElementById("menu").style.width = menuwidth; 
    94         document.endpoint.inputendpoint.style.width = inputswidth; 
     96        document.getElementById("ajaxload").style.width = menuwidth; 
    9597        document.endpoint.selectendpoint.style.width = inputswidth; 
    9698        document.seclass.startclass.style.width = inputswidth; 
     
    100102        // 繧ー繝ゥ繝墓緒逕サ驛ィ蛻�r荳企Κ繝。繝九Η繝シ逶エ蠕後↓謗・縺吶k繧医≧縺ォ險ュ螳� 
    101103        document.getElementById("graph").style.top = document.getElementById("menu").offsetHeight + "px"; 
    102  
     104        document.getElementById("ajaxload").style.height = document.getElementById("menu").offsetHeight + "px"; 
     105 
     106        ajaxload("view"); 
    103107        // 繧ィ繝ウ繝峨�繧、繝ウ繝井ク€隕ァ繧貞叙蠕励@繧サ繝�ヨ 
    104108        $.ajax({ 
     
    108112                success : function(data) { 
    109113                        setEndpoints(data); 
     114                        ajaxload("hide"); 
    110115                }, 
    111116                error : function(XMLHttpRequest, textStatus, errorThrown) { 
    112117                        alert("繝ェ繧ッ繧ィ繧ケ繝域凾縺ォ縺ェ繧薙i縺九�繧ィ繝ゥ繝シ縺檎匱逕溘@縺セ縺励◆�� + textStatus +":\n" + errorThrown); 
     118                        ajaxload("hide"); 
    113119                } 
    114120        }); 
     
    116122}); 
    117123 
     124function ajaxload(mode){ 
     125        if(mode == "view"){ 
     126                document.getElementById("ajaxload").style.display = "block"; 
     127        }else{ 
     128                document.getElementById("ajaxload").style.display = "none"; 
     129        } 
     130} 
     131 
    118132// 謠冗判蜃ヲ逅� 
    119133function view_map(){ 
     
    122136        var json = make_data(0); 
    123137 
    124         // 蜃コ譚・荳翫′縺」縺溽オ先棡繧呈ク。縺励※繝槭ャ繝嶺ク翫�繝ュ繧ア繝シ繧キ繝ァ繝ウ繧偵そ繝�ヨ 
    125         set_map_location(0, json['nodes'], json['links']); 
    126  
    127         // SVG縺ョ蟷�→鬮倥&繧定ィュ螳夲シ亥ケ�シ夂判髱「縺�▲縺ア縺�€€鬮倥&�壹ヱ繧ケ縺ョ謨ー縺ォ蠢懊§險ュ螳夲シ� 
    128         var width = window.innerWidth; 
    129         var height = ((NODEHEIGHT * 1.5) * PATHNUM) + (NODEHEIGHT / 2); 
    130  
    131         // 繧ォ繝ゥ繝シ繧貞叙蠕� 
    132         var color = d3.scale.category20(); 
    133  
    134138        // SVG縺悟ュ伜惠縺吶k縺ェ繧峨�蜑企勁 
    135139        if (d3.select("#graph").select("svg")) { 
    136                 d3.select("#graph").select("svg").remove(); 
    137         } 
    138  
    139         // 逕サ髱「繧オ繧、繧コ縺ォ蜷医o縺婀VG縺ョ霑ス蜉 
    140         var svg = d3.select("#graph").append("svg") 
    141             .attr("width", width) 
    142             .attr("height", height); 
    143  
    144         // 閭梧勹縺ョ霑ス蜉 
    145         var bg = svg 
    146                 .append("rect") 
    147                 .attr("x", 0) 
    148                 .attr("y", 0) 
    149                 .attr("width", width) 
    150                 .attr("height", height) 
    151                 .attr("fill", "#fafafa"); 
    152  
    153         // links驟榊�繧呈ク。縺励Μ繝ウ繧ッ縺ョ菴懈� 
    154         var link = svg.selectAll(".link") 
    155                 .data(json.links) 
    156                 .enter().append("line") 
    157                 .attr("class", "link") 
    158                 .style("stroke-width", function(d) { return Math.sqrt(d.value);}); 
    159  
    160         // nodes驟榊�繧呈ク。縺励ヮ繝シ繝峨�菴懈� 
    161         var node = svg.selectAll(".node") 
    162                 .data(json.nodes) 
    163                 .enter().append("circle") 
    164                 .attr("class", "node") 
    165                 .attr("r", (NODEHEIGHT / 2)) 
    166                 .attr("cx", function(d) { return d.x;} ) 
    167                 .attr("cy",  function(d) { return d.y; }) 
    168                 .style("stroke", function(d) { return '#fafafa'; }) 
    169                 .style("stroke-width", function(d) { return '1.5px'; }) 
    170                 .style("fill", function(d) { return color(d.group); }) 
    171                 .style("cursor", function(d) { return 'pointer'; }); 
    172  
    173         // nodes驟榊�繧呈ク。縺励ヮ繝シ繝峨ユ繧ュ繧ケ繝医�菴懈� 
    174         var tnode = svg.selectAll("text.node") 
    175                 .data(json.nodes) 
    176                 .enter().append("svg:text") 
    177                 .attr("class", "tnode") 
    178                 .attr("x", function(d) { return d.x; }) 
    179                 .attr("y", function(d) { return d.y; }) 
    180                 .text(function(d) { return d.name; }) 
    181                 .style("fill", function(d) { return '#000000'; }) 
    182                 .style("text-anchor", function(d) { return 'middle'; }) 
    183                 .style("pointer-events", "none"); 
    184  
    185         // 繝ェ繝ウ繧ッ繝�く繧ケ繝医�菴懈� 
    186         var tlink = svg.selectAll("text.link") 
    187                 .data(json.links) 
    188                 .enter().append("svg:text") 
    189                 .attr("class", "tlink") 
    190                 .attr("x", function(d) { return (json.nodes[d.source].x + json.nodes[d.target].x) / 2; }) 
    191                 .attr("y", function(d) { return (json.nodes[d.source].y + json.nodes[d.target].y) / 2; }) 
    192                 .style("fill", function(d) { return '#000000'; }) 
    193                 .style("text-anchor", function(d) { return 'middle'; }); 
    194  
    195         // 繝弱�繝峨∈縺ョ繧ェ繝ウ繝槭え繧ケ縺ァ繝代せ謗「邏「縲√ヱ繧ケ荳ュ縺ョ繝ェ繝ウ繧ッ譁�ュ励r陦ィ遉コ 
    196         node.on("mouseover", function(d){ 
    197  
    198                 // 繝槭え繧ケ縺ョ蜍輔″繧ォ繧ヲ繝ウ繝医r繝ェ繧サ繝�ヨ 
    199                 MOUSEMOVED = 0; 
    200  
    201                 // 陦ィ遉コ縺吶k繝代せ菫晏ュ倡畑驟榊� 
    202                 var path = []; 
    203                 // 繝��繝ォ繝√ャ繝励∈縺ョ蜷榊燕陦ィ遉コ逕ィ驟榊� 
    204                 var pathname = []; 
    205  
    206                 // 繝ォ繝シ繝医ヮ繝シ繝我サ・螟悶↑繧� 
    207                 if(d.nodeid != 0){ 
    208                         // 縺セ縺壹が繝ウ繝槭え繧ケ縺輔l縺溘ヮ繝シ繝峨�id縺ィ蜷榊燕繧偵◎繧後◇繧瑚ソス蜉 
    209                         path.push(d.nodeid); 
    210                         pathname.push(d.name); 
    211  
    212                         // 繝代せ謗「邏「 
     140                d3.select("#graph").select("svg").remove(); 
     141        } 
     142 
     143        if(json['nodes'].length != 0){ 
     144 
     145                // 蜃コ譚・荳翫′縺」縺溽オ先棡繧呈ク。縺励※繝槭ャ繝嶺ク翫�繝ュ繧ア繝シ繧キ繝ァ繝ウ繧偵そ繝�ヨ 
     146                set_map_location(0, json['nodes'], json['links']); 
     147 
     148                // SVG縺ョ蟷�→鬮倥&繧定ィュ螳夲シ亥ケ�シ夂判髱「縺�▲縺ア縺�€€鬮倥&�壹ヱ繧ケ縺ョ謨ー縺ォ蠢懊§險ュ螳夲シ� 
     149                var width = window.innerWidth; 
     150                var height = ((NODEHEIGHT * 1.5) * PATHNUM) + (NODEHEIGHT / 2); 
     151 
     152                // 繧ォ繝ゥ繝シ繧貞叙蠕� 
     153                var color = d3.scale.category20(); 
     154 
     155                // 逕サ髱「繧オ繧、繧コ縺ォ蜷医o縺婀VG縺ョ霑ス蜉 
     156                var svg = d3.select("#graph").append("svg") 
     157                        .attr("width", width) 
     158                        .attr("height", height); 
     159 
     160                // 閭梧勹縺ョ霑ス蜉 
     161                var bg = svg 
     162                        .append("rect") 
     163                        .attr("x", 0) 
     164                        .attr("y", 0) 
     165                        .attr("width", width) 
     166                        .attr("height", height) 
     167                        .attr("fill", "#fafafa"); 
     168 
     169                // links驟榊�繧呈ク。縺励Μ繝ウ繧ッ縺ョ菴懈� 
     170                var link = svg.selectAll(".link") 
     171                        .data(json.links) 
     172                        .enter().append("line") 
     173                        .attr("class", "link") 
     174                        .style("stroke-width", function(d) { return Math.sqrt(d.value);}); 
     175 
     176                // nodes驟榊�繧呈ク。縺励ヮ繝シ繝峨�菴懈� 
     177                var node = svg.selectAll(".node") 
     178                        .data(json.nodes) 
     179                        .enter().append("circle") 
     180                        .attr("class", "node") 
     181                        .attr("r", (NODEHEIGHT / 2)) 
     182                        .attr("cx", function(d) { return d.x;} ) 
     183                        .attr("cy",  function(d) { return d.y; }) 
     184                        .style("stroke", function(d) { return '#fafafa'; }) 
     185                        .style("stroke-width", function(d) { return '1.5px'; }) 
     186                        .style("fill", function(d) { return color(d.group); }) 
     187                        .style("cursor", function(d) { return 'pointer'; }); 
     188 
     189                // nodes驟榊�繧呈ク。縺励ヮ繝シ繝峨ユ繧ュ繧ケ繝医�菴懈� 
     190                var tnode = svg.selectAll("text.node") 
     191                        .data(json.nodes) 
     192                        .enter().append("svg:text") 
     193                        .attr("class", "tnode") 
     194                        .attr("x", function(d) { return d.x; }) 
     195                        .attr("y", function(d) { return d.y; }) 
     196                        .text(function(d) { return d.name; }) 
     197                        .style("fill", function(d) { return '#000000'; }) 
     198                        .style("text-anchor", function(d) { return 'middle'; }) 
     199                        .style("pointer-events", "none"); 
     200 
     201                // 繝ェ繝ウ繧ッ繝�く繧ケ繝医�菴懈� 
     202                var tlink = svg.selectAll("text.link") 
     203                        .data(json.links) 
     204                        .enter().append("svg:text") 
     205                        .attr("class", "tlink") 
     206                        .attr("x", function(d) { return (json.nodes[d.source].x + json.nodes[d.target].x) / 2; }) 
     207                        .attr("y", function(d) { return (json.nodes[d.source].y + json.nodes[d.target].y) / 2; }) 
     208                        .style("fill", function(d) { return '#000000'; }) 
     209                        .style("text-anchor", function(d) { return 'middle'; }); 
     210 
     211                // 繝弱�繝峨∈縺ョ繧ェ繝ウ繝槭え繧ケ縺ァ繝代せ謗「邏「縲√ヱ繧ケ荳ュ縺ョ繝ェ繝ウ繧ッ譁�ュ励r陦ィ遉コ 
     212                node.on("mouseover", function(d){ 
     213 
     214                        // 繝槭え繧ケ縺ョ蜍輔″繧ォ繧ヲ繝ウ繝医r繝ェ繧サ繝�ヨ 
     215                        MOUSEMOVED = 0; 
     216 
     217                        // 陦ィ遉コ縺吶k繝代せ菫晏ュ倡畑驟榊� 
     218                        var path = []; 
     219                        // 繝��繝ォ繝√ャ繝励∈縺ョ蜷榊燕陦ィ遉コ逕ィ驟榊� 
     220                        var pathname = []; 
     221 
     222                        // 繝ォ繝シ繝医ヮ繝シ繝我サ・螟悶↑繧� 
     223                        if(d.nodeid != 0){ 
     224                                // 縺セ縺壹が繝ウ繝槭え繧ケ縺輔l縺溘ヮ繝シ繝峨�id縺ィ蜷榊燕繧偵◎繧後◇繧瑚ソス蜉 
     225                                path.push(d.nodeid); 
     226                                pathname.push(d.name); 
     227 
     228                                // 繝代せ謗「邏「 
     229                                do{ 
     230                                        // 繝ェ繝ウ繧ッ縺ョ謨ー縺縺醍ケー繧願ソ斐@ 
     231                                        for(var i = 0; i < link.data().length; i++){ 
     232                                                // 迴セ蝨ィ縺ョ譛€蠕悟ーセ縺ォ郢九′繧九Μ繝ウ繧ッ縺後≠繧後� 
     233                                                if(path[(path.length-1)] == link.data()[i].target){ 
     234                                                        // 縺昴�繝ェ繝ウ繧ッ縺ョ繧ス繝シ繧ケ蛛エ繝弱�繝峨�id繧定ソス蜉 
     235                                                        path.push(link.data()[i].source); 
     236                                                        // 縺昴�繝ェ繝ウ繧ッ縺ョ蜷榊燕縺ィ繧ス繝シ繧ケ蛛エ繝弱�繝峨�蜷榊燕繧定ソス蜉 
     237                                                        pathname.push(link.data()[i].property); 
     238                                                        pathname.push(node.data()[link.data()[i].source].name); 
     239                                                } 
     240                                        } 
     241                                // 繝ォ繝シ繝医ヮ繝シ繝峨↓霎ソ繧顔捩縺上∪縺ァ郢ー繧願ソ斐☆ 
     242                                }while(path[(path.length-1)] != 0); 
     243 
     244                                // 譛ォ遶ッ繝弱�繝峨〒縺ェ縺�↑繧� 
     245                                if(d.path == "notend"){ 
     246                                        // 繝��繝ォ繝√ャ繝励r髱櫁。ィ遉コ縺ォ 
     247                                        document.getElementById("showpath").style.display = "none"; 
     248                                }else{ 
     249                                        // 譛ォ遶ッ繝弱�繝峨↑繧峨ヤ繝シ繝ォ繝√ャ繝励�諠�ア繧呈峩譁ー 
     250                                        var resultText = "<h3>Selected Path</h3>"; 
     251                                        // 繝代せ縺ョ蜷榊燕驟榊�蛻�セ後m縺九i郢ー繧願ソ斐@縺ェ縺後i 
     252                                        for (var i = pathname.length;i > 0; i--){ 
     253                                                // 螂�焚逡ェ逶ョ�医ヮ繝シ繝峨�蜷榊燕�峨�螟ェ蟄励↓ 
     254                                                if(i % 2 == 1){ 
     255                                                        resultText = resultText + "<span style=\"font-weight: bold;\">" + pathname[i - 1] + "</span><br><br>"; 
     256                                                // 蛛カ謨ー逡ェ逶ョ�医Μ繝ウ繧ッ縺ョ蜷榊燕�峨�縺昴�縺セ縺セ縺ァ陦ィ遉コ 
     257                                                }else{ 
     258                                                        resultText = resultText + pathname[i - 1] + "<br><br>"; 
     259                                                } 
     260                                        } 
     261                                        // 繝��繝ォ繝√ャ繝励�蜀�ョケ繧呈嶌縺肴鋤縺� 
     262                                        document.getElementById("selectpath").innerHTML=(resultText); 
     263                                        document.getElementById("showpath").style.display = "block"; 
     264 
     265                                        // 繧オ繝シ繝悶Ξ繝�ヨ縺ォ騾√j霑斐☆繝代せ繧ェ繝悶ず繧ァ繧ッ繝医r菫晏ュ� 
     266                                        pathobj = d.path; 
     267 
     268                                        // 繝��繝ォ繝√ャ繝苓。ィ遉コ譎ゅ�蠎ァ讓呻シ医が繝ウ繝槭え繧ケ縺輔l縺溘ヮ繝シ繝峨�讓ェ縺ォ繝懊ち繝ウ縺梧擂繧九h縺��鄂ョ�� 
     269                                        var xPosition = parseFloat(d3.select(this).attr("cx")) + parseFloat(d3.select(this).style("stroke-width")) + (NODEHEIGHT * 0.5); 
     270                                        var yPosition = parseFloat(d3.select(this).attr("cy") - document.getElementById("showpath").offsetHeight + document.getElementById("menu").offsetHeight) + (NODEHEIGHT * 0.5); 
     271 
     272                                        // 繝��繝ォ繝√ャ繝励′逕サ髱「螟悶↓蜃コ縺ェ縺�h縺�」懈ュ」 
     273                                        if(xPosition < 0){ 
     274                                                xPosition = 0; 
     275                                        } 
     276                                        if(yPosition < 0){ 
     277                                                yPosition = 0; 
     278                                        } 
     279 
     280                                        // 逕滓�縺励◆蠎ァ讓吶↓繝��繝ォ繝√ャ繝励r陦ィ遉コ 
     281                                        document.getElementById("showpath").style.left = xPosition + "px" 
     282                                        document.getElementById("showpath").style.top = yPosition + "px" 
     283                                } 
     284                        // 繝ォ繝シ繝医ヮ繝シ繝峨□縺」縺溘↑繧� 
     285                        }else{ 
     286                                // 繝��繝ォ繝√ャ繝励r髱櫁。ィ遉コ 
     287                                document.getElementById("showpath").style.display = "none"; 
     288                        } 
     289 
     290                        // 繧ェ繝ウ繝槭え繧ケ縺輔l縺溘ヮ繝シ繝峨�鬮倥&縺ォ隕ェ繧貞粋繧上○繧九◆繧√↓蜷医o縺帙k鬮倥&繧剃ソ晏ュ� 
     291                        var movey = d.y; 
     292 
     293                        // 蜷�ヮ繝シ繝峨↓蟇セ縺� 
     294                        node 
     295                                // 霈ェ驛ュ邱壹�濶イ繧定ィュ螳� 
     296                                .style("stroke", function(d){ 
     297                                        // 縺セ縺壹�閭梧勹濶イ�医ョ繝輔か繝ォ繝茨シ峨r謖�ョ� 
     298                                        var strokecolor = "#fafafa"; 
     299 
     300                                        // 繝代せ蛻、螳壹�蜑榊�逅� 
     301                                        // 陦ィ遉コ繝輔Λ繧ー縺系ow�亥燕蝗槭が繝ウ繝槭え繧ケ縺ァ蜍輔>縺ヲ縺�◆繝弱�繝会シ峨↑繧� 
     302                                        if(d.view == "now"){ 
     303                                                // 繝弱�繝峨�陦ィ遉コ繝輔Λ繧ー繧地o縺ォ 
     304                                                d.view = "no"; 
     305                                        } 
     306                                        // 陦ィ遉コ繝輔Λ繧ー縺稽oved�医け繝ェ繝�け縺輔l蝗コ螳壽ク医∩縺縺悟燕蝗槫虚縺�※縺�◆繝弱�繝会シ峨↑繧� 
     307                                        if(d.view == "moved"){ 
     308                                                // 陦ィ遉コ繝輔Λ繧ー繧団licked縺ォ謌サ縺� 
     309                                                d.view = "clicked"; 
     310                                        } 
     311 
     312                                        // 陦ィ遉コ繝輔Λ繧ー縺系o縺ョ繧ゅ�縺九i遒コ隱� 
     313                                        if(d.view == "no"){ 
     314                                                // 繝代せ縺ョ繝弱�繝画焚縺縺醍ケー繧願ソ斐@縺ェ縺後i 
     315                                                for(var n = 0; n < path.length; n++){ 
     316                                                        // 繝代せ蜀�↓蜷ォ縺セ繧後k繝弱�繝峨□縺」縺溘i 
     317                                                        if(path[n] == d.nodeid){ 
     318                                                                // 霈ェ驛ュ邱壹r襍、縺ォ 
     319                                                                strokecolor = "#ffaaaa"; 
     320                                                                // 陦ィ遉コ繝輔Λ繧ー繧地ow�井サ雁屓蜍輔>縺溘ヮ繝シ繝会シ峨↓ 
     321                                                                d.view = "now"; 
     322                                                        } 
     323                                                } 
     324                                        // 蝗コ螳壽ク医∩繝弱�繝峨□縺」縺溘i 
     325                                        }else if(d.view == "clicked"){ 
     326                                                // 縺セ縺壹�霈ェ驛ュ邱壹r襍、縺ォ 
     327                                                strokecolor = "#ffaaaa"; 
     328                                                // 繝代せ蜀�↓蜷ォ縺セ繧後k繝弱�繝峨°繝√ぉ繝�け 
     329                                                for(var n = 0; n < path.length; n++){ 
     330                                                        if(path[n] == d.nodeid){ 
     331                                                                // 蜷ォ縺セ繧後※縺�◆縺ェ繧我サ雁屓蜍輔°縺吶◆繧√ヵ繝ゥ繧ー繧知oved縺ォ 
     332                                                                d.view = "moved"; 
     333                                                        } 
     334                                                } 
     335                                        } 
     336 
     337                                        // 縺薙%縺セ縺ァ縺ァ蠕励i繧後◆霈ェ驛ュ邱壹�濶イ繧定ソ斐☆ 
     338                                        return strokecolor; 
     339                                }) 
     340                                // 鬮倥&縺ョ蛟、 
     341                                .attr("cy", function(d){ 
     342                                        // 繝弱�繝峨′莉雁屓繧ェ繝ウ繝槭え繧ケ縺輔l縺溘�縺セ縺溘�蝗コ螳壽ク医∩縺縺檎ァサ蜍輔ヵ繝ゥ繧ー繧偵▽縺代i繧後※縺�l縺ー 
     343                                        if(d.view == "now" || d.view == "moved"){ 
     344                                                // 迴セ蝨ィ縺ョ鬮倥&繧貞叙蠕� 
     345                                                var curty = d.y; 
     346                                                // d.y縺ォ蟄舌ヮ繝シ繝峨�鬮倥&繧偵そ繝�ヨ 
     347                                                d.y = movey; 
     348                                                // 迴セ蝨ィ縺ョ鬮倥&繧定ソ斐☆�医%縺ョ譎らせ縺ァ縺ッ迴セ蝨ィ菴咲スョ縺ォ謠冗判縺輔l縲〉edraw髢「謨ー縺ァd.y縺ォ繧「繝九Γ繝シ繧キ繝ァ繝ウ縺輔l繧具シ� 
     349                                                return curty; 
     350                                        // 遘サ蜍募ッセ雎。縺ァ縺ェ縺�↑繧� 
     351                                        }else{ 
     352                                                // 迴セ蝨ィ菴咲スョ繧偵◎縺ョ縺セ縺セ霑斐☆ 
     353                                                return d.y; 
     354                                        } 
     355                                }); 
     356 
     357                        // 蜷�Μ繝ウ繧ッ繝�く繧ケ繝医↓蟇セ縺� 
     358                        tlink 
     359                                // 繝�く繧ケ繝郁。ィ遉コ蛻、螳� 
     360                                .text(function(d) { 
     361                                        // 繝�ヵ繧ゥ繝ォ繝医〒遨コ繧偵そ繝�ヨ 
     362                                        var linktext = ""; 
     363                                        // 陦ィ遉コ繝輔Λ繧ー縺系ow�亥燕蝗櫁。ィ遉コ縺輔l縺ヲ縺�◆繝ェ繝ウ繧ッ�峨↑繧� 
     364                                        if(d.view == "now"){ 
     365                                                // 陦ィ遉コ繝輔Λ繧ー繧定ァ」髯、 
     366                                                d.view = "no"; 
     367                                        } 
     368 
     369                                        // 陦ィ遉コ繝輔Λ繧ー縺系o縺ェ繧� 
     370                                        if(d.view == "no"){ 
     371                                                // 繝代せ縺ョ繝弱�繝画焚蛻�ケー繧願ソ斐@ 
     372                                                for(var t = 0; t < path.length; t++){ 
     373                                                        // 閾ェ霄ォ縺後◎縺ョ繝弱�繝峨∈謗・邯壹@縺ヲ縺�k繝ェ繝ウ繧ッ�医°縺、縺昴�繝弱�繝峨′謚倥j縺溘◆縺セ繧後※縺�↑縺代l縺ー�� 
     374                                                        if(path[t] == d.target && node.data()[d.target].view != "hide"){ 
     375                                                                // 繝ェ繝ウ繧ッ繝�く繧ケ繝医↓繝励Ο繝代ユ繧」縺ョ蛟、繧偵そ繝�ヨ 
     376                                                                linktext = d.property 
     377                                                                // 陦ィ遉コ繝輔Λ繧ー縺ォnow繧偵そ繝�ヨ 
     378                                                                d.view = "now"; 
     379                                                        } 
     380                                                } 
     381                                        // 陦ィ遉コ繝輔Λ繧ー縺掲ix�医け繝ェ繝�け縺輔l縺溘ヱ繧ケ縺ョ繝ェ繝ウ繧ッ�峨↑繧峨��医°縺、郢九′繧句�縺ョ繝弱�繝峨′謚倥j縺溘◆縺セ繧後※縺�↑縺代l縺ー�� 
     382                                        }else if(d.view == "fix" && node.data()[d.target].view != "hide"){ 
     383                                                // 繝ェ繝ウ繧ッ繝�く繧ケ繝医↓繝励Ο繝代ユ繧」縺ョ蛟、繧偵そ繝�ヨ 
     384                                                linktext = d.property 
     385                                        } 
     386                                        // 縺薙%縺セ縺ァ縺ァ縺ァ縺阪◆繝ェ繝ウ繧ッ繝�く繧ケ繝医r霑斐☆ 
     387                                        return linktext; 
     388                                }); 
     389 
     390                        // 蜷�Μ繝ウ繧ッ縺ォ蟇セ縺� 
     391                        link 
     392                                // 邱壹�濶イ蛻、螳� 
     393                                .style("stroke", function(d){ 
     394                                        // 陦ィ遉コ繝輔Λ繧ー縺系o縺ェ繧峨� 
     395                                        if(d.view == "no"){ 
     396                                                // 濶イ繧偵ョ繝輔か繝ォ繝医↓ 
     397                                                return "#999"; 
     398                                        // 縺昴l莉・螟厄シ亥崋螳壹d繧ェ繝ウ繝槭え繧ケ縺輔l縺溘ヱ繧ケ縺ォ蜷ォ縺セ繧後k�峨↑繧� 
     399                                        }else{ 
     400                                                // 濶イ繧定オ、縺ォ 
     401                                                return "#ffaaaa"; 
     402                                        } 
     403                                }); 
     404 
     405                        // 縺薙%縺セ縺ァ縺ョ險ュ螳壹r蜈�↓蜀肴緒逕サ 
     406                        redraw(); 
     407 
     408                // 繝弱�繝峨∈縺ョ繧ッ繝ェ繝�け縺ァ驕ク謚槫崋螳壼喧�亥所縺ウ謚倥j逡ウ縺ソ蜃ヲ逅�シ� 
     409                }).on("click", function(d){ 
     410 
     411                        // 蜷�ヮ繝シ繝峨↓蟇セ縺� 
     412                        node 
     413                                // 霈ェ驛ュ邱壹�蛻、螳� 
     414                                .style("stroke", function(d) { 
     415                                        // 繝�ヵ繧ゥ繝ォ繝医�濶イ繧偵そ繝�ヨ 
     416                                        var strokecolor = "#fafafa" 
     417                                        // 陦ィ遉コ繝輔Λ繧ー縺後が繝ウ繝槭え繧ケ荳ュ繝サ蝗コ螳壻クュ繝サ遘サ蜍穂クュ�磯∈謚槭&繧後※縺�k繝弱�繝会シ峨↑繧峨� 
     418                                        if(d.view == "now" || d.view == "clicked" || d.view == "moved"){ 
     419                                                // 濶イ繧定オ、縺ォ 
     420                                                strokecolor = "#ffaaaa" 
     421                                                // 陦ィ遉コ繝輔Λ繧ー繧貞崋螳壻クュ縺ォ 
     422                                                d.view = "clicked"; 
     423                                        } 
     424                                        // 縺薙%縺セ縺ァ縺ァ縺ァ縺阪◆濶イ繧定ソ斐☆ 
     425                                        return strokecolor; 
     426                                }); 
     427 
     428                        // 縺薙%縺九i蟄舌ヮ繝シ繝峨�逡ウ縺ソ霎シ縺ソ蜃ヲ逅�シ育樟蝨ィ縺ッ蟒�ュ「縲∝ソオ縺ョ縺溘a繧ウ繝シ繝峨�谿九@縺ヲ縺翫¥�� 
     429                        /* 
     430                        var childs = []; 
     431                        var prevchilds = []; 
     432                        prevchilds.push(d.nodeid); 
     433 
     434                        // 
    213435                        do{ 
    214                                 // 繝ェ繝ウ繧ッ縺ョ謨ー縺縺醍ケー繧願ソ斐@ 
    215                                 for(var i = 0; i < link.data().length; i++){ 
    216                                         // 迴セ蝨ィ縺ョ譛€蠕悟ーセ縺ォ郢九′繧九Μ繝ウ繧ッ縺後≠繧後� 
    217                                         if(path[(path.length-1)] == link.data()[i].target){ 
    218                                                 // 縺昴�繝ェ繝ウ繧ッ縺ョ繧ス繝シ繧ケ蛛エ繝弱�繝峨�id繧定ソス蜉 
    219                                                 path.push(link.data()[i].source); 
    220                                                 // 縺昴�繝ェ繝ウ繧ッ縺ョ蜷榊燕縺ィ繧ス繝シ繧ケ蛛エ繝弱�繝峨�蜷榊燕繧定ソス蜉 
    221                                                 pathname.push(link.data()[i].property); 
    222                                                 pathname.push(node.data()[link.data()[i].source].name); 
    223                                         } 
     436                                var tmpchilds = []; 
     437                                var curchilds = []; 
     438                                for(var p = 0; p < prevchilds.length; p++){ 
     439                                        tmpchilds = get_children(prevchilds[p], json['links']); 
     440                                        curchilds = curchilds.concat(tmpchilds); 
    224441                                } 
    225                         // 繝ォ繝シ繝医ヮ繝シ繝峨↓霎ソ繧顔捩縺上∪縺ァ郢ー繧願ソ斐☆ 
    226                         }while(path[(path.length-1)] != 0); 
    227  
    228                         // 譛ォ遶ッ繝弱�繝峨〒縺ェ縺�↑繧� 
    229                         if(d.path == "notend"){ 
    230                                 // 繝��繝ォ繝√ャ繝励r髱櫁。ィ遉コ縺ォ 
    231                                 document.getElementById("showpath").style.display = "none"; 
    232                         }else{ 
    233                                 // 譛ォ遶ッ繝弱�繝峨↑繧峨ヤ繝シ繝ォ繝√ャ繝励�諠�ア繧呈峩譁ー 
    234                                 var resultText = "<h3>Selected Path</h3>"; 
    235                                 // 繝代せ縺ョ蜷榊燕驟榊�蛻�セ後m縺九i郢ー繧願ソ斐@縺ェ縺後i 
    236                                 for (var i = pathname.length;i > 0; i--){ 
    237                                         // 螂�焚逡ェ逶ョ�医ヮ繝シ繝峨�蜷榊燕�峨�螟ェ蟄励↓ 
    238                                         if(i % 2 == 1){ 
    239                                                 resultText = resultText + "<span style=\"font-weight: bold;\">" + pathname[i - 1] + "</span><br><br>"; 
    240                                         // 蛛カ謨ー逡ェ逶ョ�医Μ繝ウ繧ッ縺ョ蜷榊燕�峨�縺昴�縺セ縺セ縺ァ陦ィ遉コ 
    241                                         }else{ 
    242                                                 resultText = resultText + pathname[i - 1] + "<br><br>"; 
    243                                         } 
     442                                prevchilds = curchilds; 
     443                                childs = childs.concat(curchilds); 
     444 
     445                        }while(curchilds.length != 0); 
     446 
     447                        var childy = d.y; 
     448                        for(var c = 0; c < childs.length; c++){ 
     449                                if(node.data()[childs[c]].y < childy){ 
     450                                        childy = node.data()[childs[c]].y; 
    244451                                } 
    245                                 // 繝��繝ォ繝√ャ繝励�蜀�ョケ繧呈嶌縺肴鋤縺� 
    246                                 document.getElementById("selectpath").innerHTML=(resultText); 
    247  
    248                                 // 繧オ繝シ繝悶Ξ繝�ヨ縺ォ騾√j霑斐☆繝代せ繧ェ繝悶ず繧ァ繧ッ繝医r菫晏ュ� 
    249                                 pathobj = d.path; 
    250  
    251                                 // 繝��繝ォ繝√ャ繝苓。ィ遉コ譎ゅ�蠎ァ讓呻シ医が繝ウ繝槭え繧ケ縺輔l縺溘ヮ繝シ繝峨�讓ェ縺ォ繝懊ち繝ウ縺梧擂繧九h縺��鄂ョ�� 
    252                                 var xPosition = parseFloat(d3.select(this).attr("cx")) + parseFloat(d3.select(this).style("stroke-width")) + (NODEHEIGHT * 0.5); 
    253                                 var yPosition = parseFloat(d3.select(this).attr("cy") - document.getElementById("showpath").offsetHeight + document.getElementById("menu").offsetHeight) + (NODEHEIGHT * 0.5); 
    254  
    255                                 // 繝��繝ォ繝√ャ繝励′逕サ髱「螟悶↓蜃コ縺ェ縺�h縺�」懈ュ」 
    256                                 if(xPosition < 0){ 
    257                                         xPosition = 0; 
     452                        } 
     453 
     454                        d.y = childy; 
     455 
     456                        var maxdy = 0; 
     457                        var mindy = 0; 
     458 
     459                        for(var c = 0; c < childs.length; c++){ 
     460                                if(node.data()[childs[c]].view != "hide"){ 
     461                                        var dy = node.data()[childs[c]].y - d.y; 
     462                                        if(dy > maxdy){ 
     463                                                maxdy = dy; 
     464                                        } 
     465                                        node.data()[childs[c]].x = d.x; 
     466                                        node.data()[childs[c]].y = d.y; 
     467                                        node.data()[childs[c]].dy = dy; 
     468                                        node.data()[childs[c]].view = "hide"; 
     469                                        node.data()[childs[c]].hideparent = d.nodeid; 
     470                                }else{ 
     471                                        if(node.data()[childs[c]].hideparent == d.nodeid){ 
     472                                                node.data()[childs[c]].x = d.x + (TREESPACE * (node.data()[childs[c]].group - d.group)); 
     473                                                node.data()[childs[c]].y = node.data()[childs[c]].y + node.data()[childs[c]].dy; 
     474                                                if(-node.data()[childs[c]].dy < mindy){ 
     475                                                        mindy = -node.data()[childs[c]].dy; 
     476                                                } 
     477                                                node.data()[childs[c]].view = "appear"; 
     478                                                node.data()[childs[c]].hideparent = -1; 
     479                                        } 
    258480                                } 
    259                                 if(yPosition < 0){ 
    260                                         yPosition = 0; 
     481                        } 
     482 
     483                        node 
     484                        .attr("r", function(d){ 
     485                                if(d.view == "appear"){ 
     486                                        d.view = "no"; 
     487                                }else if(d.y > childy){ 
     488                                        d.y = d.y - maxdy - mindy; 
    261489                                } 
    262  
    263                                 // 逕滓�縺励◆蠎ァ讓吶↓繝��繝ォ繝√ャ繝励r陦ィ遉コ 
    264                                 document.getElementById("showpath").style.left = xPosition + "px" 
    265                                 document.getElementById("showpath").style.top = yPosition + "px" 
    266                                 document.getElementById("showpath").style.display = "block"; 
     490                                if(d.view == "hide"){ 
     491                                        d.x = node.data()[d.hideparent].x; 
     492                                        d.y = node.data()[d.hideparent].y; 
     493                                } 
     494                                if(d.nodeid == 0){ 
     495                                        d.y = childy; 
     496                                } 
     497                                return (NODEHEIGHT / 2); 
     498                        }); 
     499                        */ 
     500 
     501                        // 蜷�Μ繝ウ繧ッ縺ォ蟇セ縺� 
     502                        tlink 
     503                                // 繝�く繧ケ繝郁。ィ遉コ蛻、螳� 
     504                                .text(function(d) { 
     505                                        // 繝�ヵ繧ゥ繝ォ繝医〒遨コ縺ォ 
     506                                        var linktext = ""; 
     507                                        // 陦ィ遉コ繝輔Λ繧ー縺檎樟蝨ィ陦ィ遉コ荳ュ縺セ縺溘�蝗コ螳壼喧貂医∩縺ェ繧峨��医°縺、謚倥j逡ウ縺ソ荳ュ縺ァ縺ェ縺代l縺ー�� 
     508                                        if((d.view == "now" || d.view == "fix") && (node.data()[d.target].view != "hide")){ 
     509                                                // 繝ェ繝ウ繧ッ繝�く繧ケ繝医↓繝励Ο繝代ユ繧」縺ョ蛟、繧偵そ繝�ヨ 
     510                                                linktext = d.property 
     511                                                // 陦ィ遉コ繝輔Λ繧ー繧貞崋螳壻クュ縺ォ 
     512                                                d.view = "fix"; 
     513                                        } 
     514                                        // 繝�く繧ケ繝医r霑斐☆ 
     515                                        return linktext; 
     516                                }); 
     517 
     518                        // 縺薙%縺セ縺ァ縺ョ蜃ヲ逅�オ先棡繧貞�縺ォ蜀肴緒逕サ 
     519                        redraw(); 
     520 
     521                }); 
     522 
     523                // 蜀肴緒逕サ髢「謨ー 
     524                var redraw = function (duration){ 
     525 
     526                        // 縺九¢繧区凾髢薙′譛ェ謖�ョ壹↑繧峨� 
     527                        if(duration == undefined){ 
     528                                // 0.5遘偵°縺代※繧「繝九Γ繝シ繧キ繝ァ繝ウ 
     529                                duration = 500; 
    267530                        } 
    268                 // 繝ォ繝シ繝医ヮ繝シ繝峨□縺」縺溘↑繧� 
    269                 }else{ 
     531 
     532                        // 蜷�Μ繝ウ繧ッ縺ォ縺、縺�※險ュ螳壹&繧後◆菴咲スョ縺ォ蜀肴緒逕サ 
     533                        link 
     534                                .transition() 
     535                                .duration(duration) 
     536                                .attr("x1", function(d) {return node.data()[d.source].x;}) 
     537                                .attr("y1", function(d) {return node.data()[d.source].y;}) 
     538                                .attr("x2", function(d) {return node.data()[d.target].x;}) 
     539                                .attr("y2", function(d) {return node.data()[d.target].y;}); 
     540 
     541                        // 蜷�Μ繝ウ繧ッ繝�く繧ケ繝医↓縺、縺�※險ュ螳壹&繧後◆菴咲スョ縺ォ蜀肴緒逕サ 
     542                        tlink 
     543                                .transition() 
     544                                .duration(duration) 
     545                                .attr("x", function(d) {return (node.data()[d.source].x + node.data()[d.target].x) / 2;}) 
     546                                .attr("y", function(d) {return ((node.data()[d.source].y + node.data()[d.target].y) / 2) + 5;}); 
     547 
     548                        // 蜷�ヮ繝シ繝峨↓縺、縺�※險ュ螳壹&繧後◆菴咲スョ縺ォ蜀肴緒逕サ�医°縺、謚倥j縺溘◆縺セ繧御クュ縺ョ蝣エ蜷医�謠冗判蛻�イ仙�逅�シ� 
     549                        node 
     550                                .transition() 
     551                                .duration(duration) 
     552                                .attr("cx", function(d) {return d.x;}) 
     553                                .attr("cy", function(d) {return d.y;}) 
     554                                .style("opacity", function(d){ 
     555                                        var opa = 1.0; 
     556                                        if(d.view == "hide"){ 
     557                                                opa = 0.0; 
     558                                        } 
     559                                        return opa; 
     560                                }) 
     561                                .style("fill", function(d) { 
     562                                        var fcolor = color(d.group); 
     563 
     564                                        for(var n = 0; n < node.data().length; n++){ 
     565                                                if(d.nodeid == node.data()[n].hideparent){ 
     566                                                        fcolor = "ffaaaa"; 
     567                                                } 
     568                                        } 
     569                                        return fcolor; 
     570                                }) 
     571                                .style("pointer-events", function(d){ 
     572                                        var pe = "auto"; 
     573                                        if(d.view == "hide"){ 
     574                                                pe = "none"; 
     575                                        } 
     576                                        return pe; 
     577                                }); 
     578 
     579                        // 蜷�ヮ繝シ繝峨ユ繧ュ繧ケ繝医↓縺、縺�※險ュ螳壹&繧後◆菴咲スョ縺ォ蜀肴緒逕サ縲√ユ繧ュ繧ケ繝域緒逕サ菴咲スョ繧剃ク贋ク九↓謖ッ繧具シ医°縺、謚倥j縺溘◆縺セ繧御クュ縺ョ蝣エ蜷医�謠冗判蛻�イ仙�逅�シ� 
     580                        tnode 
     581                        .transition() 
     582                        .duration(duration) 
     583                        .attr("x", function(d) {return d.x;}) 
     584                        .attr("y", function(d) { 
     585                                // 繝�ヵ繧ゥ繝ォ繝医〒蟆代@荳九£繧� 
     586                                var updown = (NODEHEIGHT * 0.4); 
     587                                // 螂�焚逡ェ逶ョ縺ョ豺ア縺輔↑繧牙ー代@荳翫£繧� 
     588                                if(d.group % 2 == 1){ 
     589                                        updown = -(NODEHEIGHT * 0.2); 
     590                                } 
     591                                // 縺昴�蛟、繧帝ォ倥&縺ォ霑斐☆縺薙→縺ァ繝�く繧ケ繝域緒逕サ菴咲スョ縺御コ偵>驕輔>縺ォ縺ェ繧� 
     592                                return d.y + updown; 
     593                        }) 
     594                        // 謚倥j逡ウ縺ソ迥カ諷九↑繧峨ユ繧ュ繧ケ繝郁。ィ遉コ繧呈カ医☆ 
     595                        .text(function(d){ 
     596                                var nodetext = d.name 
     597                                if(d.view == "hide"){ 
     598                                        nodetext = ""; 
     599                                } 
     600                                return nodetext; 
     601                        }); 
     602 
     603                }; 
     604 
     605                // 閭梧勹驛ィ蛻�′繧ッ繝ェ繝�け縺輔l縺溘i陦ィ遉コ縺ョ蝗コ螳壼喧繧定ァ」髯、 
     606                bg.on("click", function() { 
    270607                        // 繝��繝ォ繝√ャ繝励r髱櫁。ィ遉コ 
    271608                        document.getElementById("showpath").style.display = "none"; 
    272                 } 
    273  
    274                 // 繧ェ繝ウ繝槭え繧ケ縺輔l縺溘ヮ繝シ繝峨�鬮倥&縺ォ隕ェ繧貞粋繧上○繧� 
    275                 // 蜷医o縺帙k鬮倥&繧剃ソ晏ュ� 
    276                 var movey = d.y; 
    277  
    278                 // 蜷�ヮ繝シ繝峨↓蟇セ縺� 
    279                 node 
    280                         // 霈ェ驛ュ邱壹�濶イ繧定ィュ螳� 
    281                         .style("stroke", function(d){ 
    282                                 // 縺セ縺壹�閭梧勹濶イ�医ョ繝輔か繝ォ繝茨シ峨r謖�ョ� 
    283                                 var strokecolor = "#fafafa"; 
    284                                 // 蜑榊屓濶イ繧剃サ倥¢縺ヲ縺�◆繝弱�繝峨↑繧� 
    285                                 if(d.view == "now"){ 
    286                                         // 繝弱�繝峨�濶イ莉倥¢繧偵↑縺励↓ 
     609                        d3.selectAll(".node").style("stroke-width", function(d) { return '1.5px'; }); 
     610                        d3.selectAll(".node").style("stroke", function(d) { return '#ffffff'; }); 
     611 
     612                        // 蜷�ヮ繝シ繝峨�霈ェ驛ュ邱壹�濶イ繧偵ョ繝輔か繝ォ繝医↓ 
     613                        node 
     614                                .style("stroke", function(d){ 
     615                                        if(d.view != "hide"){ 
     616                                                d.view = "no"; 
     617                                        } 
     618                                        return "#fafafa"; 
     619                                }); 
     620 
     621                        // 繝ェ繝ウ繧ッ繝�く繧ケ繝医r蜈ィ縺ヲ遨コ縺ォ 
     622                        tlink 
     623                                .text(function(d) { 
    287624                                        d.view = "no"; 
    288                                 } 
    289                                 if(d.view == "moved"){ 
    290                                         d.view = "clicked"; 
    291                                 } 
    292  
    293                                 if(d.view == "no"){ 
    294                                         for(var n = 0; n < path.length; n++){ 
    295                                                 if(path[n] == d.nodeid){ 
    296                                                         strokecolor = "#ffaaaa"; 
    297                                                         d.view = "now"; 
    298                                                 } 
    299                                         } 
    300                                 }else if(d.view == "clicked"){ 
    301                                         strokecolor = "#ffaaaa"; 
    302                                         for(var n = 0; n < path.length; n++){ 
    303                                                 if(path[n] == d.nodeid){ 
    304                                                         d.view = "moved"; 
    305                                                 } 
    306                                         } 
    307                                 } 
    308  
    309                                 return strokecolor; 
    310                         }) 
    311                         .attr("cy", function(d){ 
    312                                 if(d.view == "now" || d.view == "moved"){ 
    313                                         var curty = d.y; 
    314                                         d.y = movey; 
    315                                         return curty; 
    316                                 }else{ 
    317                                         return d.y; 
    318                                 } 
    319                         }); 
    320  
    321                 tlink 
    322                         .text(function(d) { 
    323                                 var linktext = ""; 
    324                                 if(d.view == "now"){ 
    325                                         d.view = "no"; 
    326                                 } 
    327  
    328                                 if(d.view == "no"){ 
    329                                         for(var t = 0; t < path.length; t++){ 
    330                                                 if(path[t] == d.target && node.data()[d.target].view != "hide"){ 
    331                                                         linktext = d.property 
    332                                                         d.view = "now"; 
    333                                                 } 
    334                                         } 
    335                                 }else if(d.view == "fix" && node.data()[d.target].view != "hide"){ 
    336                                         linktext = d.property 
    337                                 } 
    338                                 return linktext; 
    339                         }); 
    340  
    341                 link 
    342                         .style("stroke", function(d){ 
    343                                 if(d.view == "no"){ 
     625                                        return ""; 
     626                                }); 
     627 
     628                        // 繝ェ繝ウ繧ッ縺ョ濶イ繧貞�縺ヲ繝�ヵ繧ゥ繝ォ繝医↓ 
     629                        link 
     630                                .style("stroke", function(d){ 
    344631                                        return "#999"; 
    345                                 }else{ 
    346                                         return "#ffaaaa"; 
    347                                 } 
    348                         }); 
    349  
    350                 redraw(); 
    351  
    352         }).on("click", function(d){ 
    353  
    354                 node 
    355                 .style("stroke", function(d) { 
    356                         var strokecolor = "#fafafa" 
    357                         if(d.view == "now" || d.view == "clicked" || d.view == "moved"){ 
    358                                 strokecolor = "#ffaaaa" 
    359                                 d.view = "clicked"; 
     632                                }); 
     633 
     634                }); 
     635 
     636                // 閭梧勹荳翫〒繝槭え繧ケ縺悟虚縺上#縺ィ縺ォ 
     637                bg.on("mousemove", function(){ 
     638                        // MOUSEMOVED繧定ソス蜉�医ヮ繝シ繝峨↓繧ェ繝ウ繝槭え繧ケ縺輔l繧句コヲ縺ォ繧ォ繧ヲ繝ウ繝医Μ繧サ繝�ヨ�� 
     639                        MOUSEMOVED++; 
     640                        // 30繧定カ�∴縺溘i 
     641                        if(MOUSEMOVED > 30){ 
     642                                // 繝��繝ォ繝√ャ繝励r髱櫁。ィ遉コ縺ォ縺励※繧ォ繧ヲ繝ウ繝医Μ繧サ繝�ヨ 
     643                                document.getElementById("showpath").style.display = "none"; 
     644                                MOUSEMOVED = 0; 
    360645                        } 
    361                         return strokecolor; 
    362646                }); 
    363647 
    364                 //d.hideparent = d.nodeid; 
    365  
    366                 var childs = []; 
    367                 var prevchilds = []; 
    368                 prevchilds.push(d.nodeid); 
    369  
    370                 do{ 
    371                         var tmpchilds = []; 
    372                         var curchilds = []; 
    373                         for(var p = 0; p < prevchilds.length; p++){ 
    374                                 tmpchilds = get_children(prevchilds[p], json['links']); 
    375                                 curchilds = curchilds.concat(tmpchilds); 
    376                         } 
    377                         prevchilds = curchilds; 
    378                         childs = childs.concat(curchilds); 
    379  
    380                 }while(curchilds.length != 0); 
    381  
    382                 var childy = d.y; 
    383                 for(var c = 0; c < childs.length; c++){ 
    384                         if(node.data()[childs[c]].y < childy){ 
    385                                 childy = node.data()[childs[c]].y; 
    386                         } 
    387                 } 
    388  
    389                 d.y = childy; 
    390  
    391                 var maxdy = 0; 
    392                 var mindy = 0; 
    393  
    394                 for(var c = 0; c < childs.length; c++){ 
    395                         if(node.data()[childs[c]].view != "hide"){ 
    396                                 var dy = node.data()[childs[c]].y - d.y; 
    397                                 if(dy > maxdy){ 
    398                                         maxdy = dy; 
    399                                 } 
    400                                 node.data()[childs[c]].x = d.x; 
    401                                 node.data()[childs[c]].y = d.y; 
    402                                 node.data()[childs[c]].dy = dy; 
    403                                 node.data()[childs[c]].view = "hide"; 
    404                                 node.data()[childs[c]].hideparent = d.nodeid; 
    405                         }else{ 
    406                                 if(node.data()[childs[c]].hideparent == d.nodeid){ 
    407                                         node.data()[childs[c]].x = d.x + (TREESPACE * (node.data()[childs[c]].group - d.group)); 
    408                                         node.data()[childs[c]].y = node.data()[childs[c]].y + node.data()[childs[c]].dy; 
    409                                         if(-node.data()[childs[c]].dy < mindy){ 
    410                                                 mindy = -node.data()[childs[c]].dy; 
    411                                         } 
    412                                         node.data()[childs[c]].view = "appear"; 
    413                                         node.data()[childs[c]].hideparent = -1; 
    414                                 } 
    415                         } 
    416                 } 
    417  
    418                 node 
    419                 .attr("r", function(d){ 
    420                         if(d.view == "appear"){ 
    421                                 d.view = "no"; 
    422                         }else if(d.y > childy){ 
    423                                 d.y = d.y - maxdy - mindy; 
    424                         } 
    425                         if(d.view == "hide"){ 
    426                                 d.x = node.data()[d.hideparent].x; 
    427                                 d.y = node.data()[d.hideparent].y; 
    428                         } 
    429                         if(d.nodeid == 0){ 
    430                                 d.y = childy; 
    431                         } 
    432                         return (NODEHEIGHT / 2); 
    433                 }); 
    434  
    435                 tlink 
    436                 .text(function(d) { 
    437                         var linktext = ""; 
    438                         if((d.view == "now" || d.view == "fix") && (node.data()[d.target].view != "hide")){ 
    439                                 linktext = d.property 
    440                                 d.view = "fix"; 
    441                         } 
    442                         return linktext; 
    443                 }); 
    444  
    445  
    446                 redraw(); 
    447  
    448         }); 
    449  
    450         var redraw = function (duration){ 
    451  
    452                 if(duration == undefined){ 
    453                         duration = 500; 
    454                 } 
    455  
    456                 link 
    457                 .transition() 
    458                 .duration(duration) 
    459                 .attr("x1", function(d) {return node.data()[d.source].x;}) 
    460                 .attr("y1", function(d) {return node.data()[d.source].y;}) 
    461                 .attr("x2", function(d) {return node.data()[d.target].x;}) 
    462                 .attr("y2", function(d) {return node.data()[d.target].y;}); 
    463  
    464                 tlink 
    465                 .transition() 
    466                 .duration(duration) 
    467                 .attr("x", function(d) {return (node.data()[d.source].x + node.data()[d.target].x) / 2;}) 
    468                 .attr("y", function(d) {return ((node.data()[d.source].y + node.data()[d.target].y) / 2) + 5;}); 
    469  
    470                 node 
    471                 .transition() 
    472                 .duration(duration) 
    473                 .attr("cx", function(d) {return d.x;}) 
    474                 .attr("cy", function(d) {return d.y;}) 
    475                 .style("opacity", function(d){ 
    476                         var opa = 1.0; 
    477                         if(d.view == "hide"){ 
    478                                 opa = 0.0; 
    479                         } 
    480                         return opa; 
    481                 }) 
    482                 .style("fill", function(d) { 
    483                         var fcolor = color(d.group); 
    484  
    485                         for(var n = 0; n < node.data().length; n++){ 
    486                                 if(d.nodeid == node.data()[n].hideparent){ 
    487                                         fcolor = "ffaaaa"; 
    488                                 } 
    489                         } 
    490                         return fcolor; 
    491                 }) 
    492                 .style("pointer-events", function(d){ 
    493                         var pe = "auto"; 
    494                         if(d.view == "hide"){ 
    495                                 pe = "none"; 
    496                         } 
    497                         return pe; 
    498                 }); 
    499  
    500                 tnode 
    501                 .transition() 
    502                 .duration(duration) 
    503                 .attr("x", function(d) {return d.x;}) 
    504                 .attr("y", function(d) { 
    505                         var updown = (NODEHEIGHT * 0.4); 
    506                         if(d.group % 2 == 1){ 
    507                                 updown = -(NODEHEIGHT * 0.2); 
    508                         } 
    509                         if(d.view == "now" || d.view == "moved"){ 
    510                                 //updown = 5; 
    511                         } 
    512                         return d.y + updown; 
    513                 }) 
    514                 .text(function(d){ 
    515                         var nodetext = d.name 
    516                         if(d.view == "hide"){ 
    517                                 nodetext = ""; 
    518                         } 
    519                         return nodetext; 
    520                 }); 
    521  
    522         }; 
    523  
    524         bg.on("click", function() { 
    525                 document.getElementById("showpath").style.display = "none"; 
    526                 d3.selectAll(".node").style("stroke-width", function(d) { return '1.5px'; }); 
    527                 d3.selectAll(".node").style("stroke", function(d) { return '#ffffff'; }); 
    528  
    529                 node 
    530                 .style("stroke", function(d){ 
    531                         if(d.view != "hide"){ 
    532                                 d.view = "no"; 
    533                         } 
    534                         return "#fafafa"; 
    535                 }); 
    536  
    537                 tlink 
    538                 .text(function(d) { 
    539                         d.view = "no"; 
    540                         return ""; 
    541                 }); 
    542  
    543                 link 
    544                 .style("stroke", function(d){ 
    545                         return "#999"; 
    546                 }); 
    547  
    548         }); 
    549  
    550         bg.on("mousemove", function(){ 
    551                 MOUSEMOVED++; 
    552                 if(MOUSEMOVED > 30){ 
    553                         document.getElementById("showpath").style.display = "none"; 
    554                         MOUSEMOVED = 0; 
    555                 } 
    556         }); 
    557  
    558         redraw(0); 
     648                // 蛻晏屓縺ョ縺ソduration繧�縺ィ謖�ョ壹@蜀肴緒逕サ�医い繝九Γ繝シ繧キ繝ァ繝ウ縺ェ縺暦シ� 
     649                redraw(0); 
     650        } 
    559651} 
    560652 
     
    573665        DRAWHEIGHT = NODEHEIGHT; 
    574666 
     667        var viewnum; 
     668 
    575669        var obj = JSON.parse(jsontext); 
     670 
     671        document.getElementById("resultmessage").style.color = "black"; 
     672        document.getElementById("resultmessage").style.fontWeight = "normal"; 
     673 
     674        document.getElementById("plural").innerHTML = "s"; 
     675 
     676        if(obj['paths'].length == 0){ 
     677                document.getElementById("resultmessage").style.color = "red"; 
     678                document.getElementById("resultmessage").style.fontWeight = "bold"; 
     679                document.getElementById("plural").innerHTML = ""; 
     680        }else if(obj['paths'].length == 1){ 
     681                document.getElementById("plural").innerHTML = ""; 
     682        } 
     683 
     684        if(obj['paths'].length <= 10){ 
     685                viewnum = obj['paths'].length; 
     686                document.getElementById("viewall").style.display = "none"; 
     687        }else if(pathlimit == 10){ 
     688                viewnum = 10; 
     689                document.getElementById("viewall").style.display = "block"; 
     690        }else{ 
     691                viewnum = obj['paths'].length; 
     692                document.getElementById("viewall").style.display = "none"; 
     693        } 
     694 
     695        document.getElementById("pathnum").innerHTML = obj['paths'].length; 
     696        document.getElementById("resultmessage").style.display = "block"; 
     697 
    576698        // obj繝医ャ繝鈴嚴螻、縺ョ謨ー縺縺醍ケー繧願ソ斐@縺ェ縺後i 
    577         //for(var i = 0; i < obj['paths'].length; i++){ 
    578         for(var i = 0; i < 10; i++){ 
     699        for(var i = 0; i < viewnum; i++){ 
    579700                if(i == 0){ 
    580701                        // 蛻晏屓縺縺代Ν繝シ繝医ヮ繝シ繝峨r繝励ャ繧キ繝・ 
     
    667788                depth = 0; 
    668789        } 
    669 /* 
    670         // fromAngle縺梧悴螳夂セゥ縺ェ繧峨�0繧偵そ繝�ヨ 
    671         if (fromAngle == undefined){ 
    672                 fromAngle = 0; 
    673         } 
    674         // toAngle縺梧悴螳夂セゥ縺ェ繧峨�1繧偵そ繝�ヨ 
    675         if (toAngle == undefined){ 
    676                 toAngle = 1; 
    677         } 
    678 */ 
    679790 
    680791        // 蜷�ィョ蛻晄悄蛹� 
     
    682793        var parent = undefined; 
    683794        var parentsChildren = undefined; 
    684  
    685         /* 
    686         ret['nodes'].push({'name':'aaaa', 'group': depth, 'x':(WIDTH/2), 'y':(HEIGHT/2)}); 
    687         ret['links'].push({'source':parent, 'target':newIndex, 'value':5}); 
    688         */ 
    689795 
    690796        // links驟榊�縺ョ謨ー縺縺醍ケー繧願ソ斐@縺ェ縺後i 
     
    715821        } 
    716822 
    717         /* 
    718         var x = (WIDTH/2) + depth * (WIDTH / (MAXDEPTH * 2 + 1)) * Math.sin(2 * 3.14 * ((toAngle + fromAngle) / 2)); 
    719         var y = (HEIGHT/2) + depth * (HEIGHT / (MAXDEPTH * 2 + 1)) * Math.cos(2 * 3.14 * ((toAngle + fromAngle) / 2)); 
    720         nodes[myNodeIndex].x = x; 
    721         nodes[myNodeIndex].y = y; 
    722  
    723         CIRCLE_SIZE = (WIDTH / (MAXDEPTH * 2 + 1)); 
    724         */ 
    725  
    726823        children = get_children(myNodeIndex, links); 
    727824 
     
    768865        document.getElementById("showpath").style.display = "none"; 
    769866 
     867        ajaxload("view"); 
    770868        $.ajax({ 
    771869                type: "GET", 
     
    773871                data: { 
    774872                    ep: sel 
    775   }, 
     873                }, 
    776874                dataType: 'json', 
    777875                success : function(epclass) { 
     
    782880                                $("*[name=endclass]").append('<option value="' + epclass[i] + '">' + epclass[i]); 
    783881                        } 
     882                        ajaxload("hide"); 
    784883                }, 
    785884                error : function(XMLHttpRequest, textStatus, errorThrown) { 
    786885                        alert("繝ェ繧ッ繧ィ繧ケ繝域凾縺ォ縺ェ繧薙i縺九�繧ィ繝ゥ繝シ縺檎匱逕溘@縺セ縺励◆�� + textStatus +":\n" + errorThrown); 
     886                        ajaxload("hide"); 
    787887                } 
    788888        }); 
     
    794894        var sel = $("*[name=selectendpoint]").val(); 
    795895 
    796         if(sel == "input"){ 
    797                 sel = $("*[name=inputendpoint]").val(); 
    798         } 
    799  
    800896        MAXDEPTH = 0; 
    801897 
     
    806902        var selend = $("*[name=endclass]").val(); 
    807903 
     904        ajaxload("view"); 
    808905        $.ajax({ 
    809906                type: "GET", 
     
    813910                    startclass: selstart, 
    814911                    endclass: selend 
    815   }, 
     912                }, 
    816913                dataType: 'text', 
    817914                success : function(nodes) { 
    818915                        jsontext = nodes; 
    819                         console.log(nodes); 
     916                        pathlimit = 10; 
    820917                        view_map(); 
     918                        ajaxload("hide"); 
    821919                }, 
    822920                error : function(XMLHttpRequest, textStatus, errorThrown) { 
    823921                        alert("繝ェ繧ッ繧ィ繧ケ繝域凾縺ォ縺ェ繧薙i縺九�繧ィ繝ゥ繝シ縺檎匱逕溘@縺セ縺励◆�� + textStatus +":\n" + errorThrown); 
     922                        ajaxload("hide"); 
    824923                } 
    825924        }); 
    826925} 
    827926 
     927function viewAll(){ 
     928        pathlimit = 0; 
     929        document.getElementById("viewall").style.display = "none"; 
     930        view_map(); 
     931} 
     932 
    828933function getSPARQL(){ 
    829934 
     
    832937        //document.getElementById("selectpath").innerHTML=(resultText); 
    833938 
     939        ajaxload("view"); 
    834940        $.ajax({ 
    835941                type: "GET", 
     
    837943                data: { 
    838944                    jsonpath: selectpath 
    839   }, 
     945                }, 
    840946                dataType: 'text', 
    841947                success : function(sparql) { 
     
    843949                        document.getElementById("showpath").style.display = "none"; 
    844950                        window.scrollTo(0, 0); 
     951                        ajaxload("hide"); 
    845952                }, 
    846953                error : function(XMLHttpRequest, textStatus, errorThrown) { 
    847954                        alert("繝ェ繧ッ繧ィ繧ケ繝域凾縺ォ縺ェ繧薙i縺九�繧ィ繝ゥ繝シ縺檎匱逕溘@縺セ縺励◆�� + textStatus +":\n" + errorThrown); 
     955                        ajaxload("hide"); 
    848956                } 
    849957        }); 
     958 
    850959} 
    851960 
     
    880989                <div id="endpoint"> 
    881990                        <form name="endpoint"> 
    882                                 <input type="text" style="width: 200px;" name="inputendpoint"><br> 
    883991                                <select size=1 name="selectendpoint" style="width: 200px;"> 
    884                                         <option value="input">Textbox 
    885992                                </select><br> 
    886993                                <input type="button" name="setendpoint" value="SetEndPoint" onClick="setEndpoint()"> 
    887994                        </form> 
    888995                </div> 
    889                 <div id="seclass" style="margin-top: 30px;"> 
     996                <div id="seclass" style="margin-top: 20px; display: none;"> 
    890997                        <form name="seclass"> 
    891998                                StartClass<br> 
     
    8981005                        </form> 
    8991006                </div> 
     1007                <div id="resultmessage" style="margin-top: 20px; display: none;"> 
     1008                        <span id="pathnum"></span> Path<span id="plural"></span> found.<input id="viewall" type="button" name="viewall" value="View all path" onClick="viewAll()" style="display: none;"> 
     1009                </div> 
    9001010        </div> 
    9011011 
     
    9071017        </div> 
    9081018</div> 
    909 <div id="graph" style="position: absolute; top:0px; left:0px;"> 
     1019<div id="graph" style="position: absolute; top: 0px; left: 0px;"> 
    9101020</div> 
    9111021<div id="showpath" style="display: none;"> 
     
    9141024        <input type="button" id="getsparqlbutton" name="getsparql" value="Get SPARQL" onClick="getSPARQL()"> 
    9151025</div> 
     1026<div id="ajaxload" style="position: absolute; top: 0; left:0; background: white; opacity: 0.7;"> 
     1027        <div style="position: absolute; top: 0; left:0; right: 0; bottom: 0; margin: auto; width: 100px; height: 100px;"> 
     1028                <img src="ajax-loader.gif"> 
     1029        </div> 
     1030</div> 
    9161031</body> 
    9171032</html>