チェンジセット 102 : BH13SPARQLBuilder/src/hozo/maptool/jsgui.html

更新日時:

2014/07/04 18:59:01 (10 年 前)

更新者:

lenz

ログメッセージ:

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

ファイル:

• BH13SPARQLBuilder/src/hozo/maptool/jsgui.html (変更) (24 diff)

BH13SPARQLBuilder/src/hozo/maptool/jsgui.html

@@ -18 +18 @@
   stroke: #999;
   stroke-opacity: .6;
+}
+
+#showpath {
+        position: absolute;
+        width: 200px;
+        height: auto;
+        padding: 10px;
+        background-color: #aaccee;
+        -webkit-border-radius: 10px;
+        -moz-border-radius: 10px;
+        border-radius: 10px;
+        -webkit-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
+        -moz-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
+        box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
 }
 
@@ -54 +68 @@
 
 
-
-// 謠冗判鬆伜沺縺ｮ繧ｵ繧､繧ｺ
-var WIDTH = window.innerWidth * 3 / 4;
-var HEIGHT = window.innerWidth * 3 / 4;
 var pathname = [];
+var PATHNUM = 0;
 var MAXDEPTH = 0;
+var TREESPACE = 0;
+var DRAWHEIGHT = 0;
 var jsontext = "";
+
 
 // 髢九＞縺溘ｉview_map繝｡繧ｽ繝�ラ繧貞他縺ｶ
@@ -68 +82 @@
 // ZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZN
 
-        var rleft = (window.innerWidth * 3 / 4) + "px";
-        var rwidth = (window.innerWidth / 4) - 50 + "px";
-        document.getElementById("right").style.left = rleft;
-        document.getElementById("right").style.width = rwidth;
-        document.endpoint.inputendpoint.style.width = rwidth;
-        document.endpoint.selectendpoint.style.width = rwidth;
-        document.seclass.startclass.style.width = rwidth;
-        document.seclass.endclass.style.width = rwidth;
-        document.path.sparql.style.width = rwidth;
+        var menuwidth = window.innerWidth + "px";
+        var inputswidth = ((window.innerWidth - 100) / 2) + "px";
+        document.getElementById("menu").style.width = menuwidth;
+        document.endpoint.inputendpoint.style.width = inputswidth;
+        document.endpoint.selectendpoint.style.width = inputswidth;
+        document.seclass.startclass.style.width = inputswidth;
+        document.seclass.endclass.style.width = inputswidth;
+        document.path.sparql.style.width = inputswidth;
+        document.path.sendsparql.style.width = inputswidth;
+        document.getElementById("graph").style.top = document.getElementById("menu").offsetHeight + "px";
 
         $.ajax({
@@ -93 +108 @@
 // ZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZN
 
-        //setEndpoints(jsonep);
-        // view_map();
 });
 
@@ -100 +113 @@
 function view_map(){
 
-        // 豺ｱ縺輔ｒ蜿門ｾ励€∵�遉ｺ逧�↓謨ｰ蛟､蛹�
-        var dep = 0;//$('#map_depth').val();
-        //dep =  parseInt(dep, 10);
-
-//http://jsdo.it/_shimizu/hszt
-//http://www.h2.dion.ne.jp/~defghi/svgMemo/svgMemo_19.htm
-
-        // 豺ｱ縺輔ｒ蠑墓焚縺ｨ縺励※貂｡縺励◆make_testdata繝｡繧ｽ繝�ラ縺ｮ邨先棡繧貞叙蠕�
-        var json = make_testdata(dep);
+        // make_data繝｡繧ｽ繝�ラ縺ｮ邨先棡繧貞叙蠕�
+        var json = make_data(0);
+        // 豺ｱ縺輔ｒ蜿門ｾ�
+        var dep = MAXDEPTH;
 
         // 蜃ｺ譚･荳翫′縺｣縺溽ｵ先棡繧呈ｸ｡縺励※繝槭ャ繝嶺ｸ翫�繝ｭ繧ｱ繝ｼ繧ｷ繝ｧ繝ｳ繧偵そ繝�ヨ
         set_map_location(0, json['nodes'], json['links']);
 
-        var width = WIDTH,縲€height = HEIGHT;
-
-        // 繧ｫ繝ｩ繝ｼ繧貞叙蠕暦ｼ�
+        var width = window.innerWidth;
+        var height = TREESPACE * PATHNUM;
+
+        // 繧ｫ繝ｩ繝ｼ繧貞叙蠕�
         var color = d3.scale.category20();
 
-        // svg縺悟ｭ伜惠縺吶ｋ縺ｪ繧峨�蜑企勁��
+        // SVG縺悟ｭ伜惠縺吶ｋ縺ｪ繧峨�蜑企勁
         if (d3.select("#graph").select("svg")) {
                 d3.select("#graph").select("svg").remove();
         }
 
-        // 繧上°繧峨〓
+        // 繝峨Λ繝�げ譎ゅ�蜃ｦ逅�
         var drag = d3.behavior.drag().on("drag", function(d,i) {
             d.x += d3.event.dx
@@ -132 +141 @@
         });
 
+        // SVG縺ｮ霑ｽ蜉
         var svg = d3.select("#graph").append("svg")
             .attr("width", width)
             .attr("height", height);
-
-        var mc = new Array();
-        for (var i=0; i<dep; i++){
-                mc.push((dep-i) * CIRCLE_SIZE);
-        }
-
-        var mapCircle = svg.selectAll(".mapCircle")
-        .data(mc)
-        .enter().append("circle")
-    .attr("class", "map")
-    .attr("r", function(d) { return d;})
-    .attr("cx", function(d) { return (WIDTH/2);} )
-    .attr("cy",  function(d) { return (HEIGHT/2); })
-        .style("stroke-dasharray", ("5, 5"))
-        .style("fill", function(d) { return '#eeeeee'; })
-        .style("stroke", function(d) { return '#000000'; })
-        .style("opacity", 0.3);
 
         var link = svg.selectAll(".link")
@@ -157 +150 @@
         .enter().append("line")
         .attr("class", "link")
-        .style("cursor", function(d) { return 'pointer'; })
         .style("stroke-width", function(d) { return Math.sqrt(d.value); });
-
-        var arrowname = new Array();
-        if ($('#arrow_end').val() == 'true'){ // target譁ｹ蜷代↓arrow縺ゅｊ
-                arrowname.push('adr');
-                arrowname.push('adl');
-        }
-
-        if ($('#arrow_start').val() == 'true'){ // source譁ｹ蜷代↓arrow縺ゅｊ
-                arrowname.push('asr');
-                arrowname.push('asl');
-        }
-
-        var arrows = [];
-
-        for (var i=0; i<arrowname.length; i++){
-                arrows[arrowname[i]] = svg.selectAll("arrow.link")
-                .data(json.links)
-                .enter().append("line")
-                .attr("class", "link");
-        }
-
-        var tlink = svg.selectAll("text.link")
-        .data(json.links)
-        .enter().append("svg:text")
-        .attr("class", "tlink")
-        .attr("x", function(d) {
-                return (json.nodes[d.source].x + json.nodes[d.target].x) / 2;
-        })
-        .attr("y", function(d) { return (json.nodes[d.source].y + json.nodes[d.target].y) / 2; })
-        .text(function(d) { return d.property; }) // TODO 繝ｪ繝ｳ繧ｯ譁�ｭ�
-        .style("fill", function(d) { return '#ffffff'; })
-        .style("stroke", function(d) { return '#000000'; })
-        .style("text-anchor", function(d) { return 'middle'; });
 
         var node = svg.selectAll(".node")
@@ -217 +176 @@
         .style("stroke-width", function(d) { return '1.5px'; })
         .style("text-anchor", function(d) { return 'middle'; })
+        .style("pointer-events", "none")
         .call(drag);
 
-        /*
-        node.append("title")
-        .text(function(d) { return d.name; });
-        */
-
-        // 繝ｪ繝ｳ繧ｯ繧ｯ繝ｪ繝�け縺ｧ驕ｸ謚�
-        link.on("click", function(d){
-                d3.selectAll(".link").style("stroke-width", function(d) { return Math.sqrt(d.value); });
-                d3.select(this).style("stroke-width", function(d) { return 10; });
-        });
-
-        // 繝弱�繝峨け繝ｪ繝�け縺ｧ驕ｸ謚�
+        var tlink = svg.selectAll("text.link")
+        .data(json.links)
+        .enter().append("svg:text")
+        .attr("class", "tlink")
+        .attr("x", function(d) { return (json.nodes[d.source].x + json.nodes[d.target].x) / 2; })
+        .attr("y", function(d) { return (json.nodes[d.source].y + json.nodes[d.target].y) / 2; })
+        //.text(function(d) { return d.property; })
+        .style("fill", function(d) { return '#000000'; })
+        .style("text-anchor", function(d) { return 'middle'; });
+
+        // 繝弱�繝峨∈縺ｮ繧ｪ繝ｳ繝槭え繧ｹ縺ｧ繝代せ謗｢邏｢
         node.on("mouseover", function(d){
-
-// ZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZN
-// ZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZN
 
                 var path = [];
@@ -246 +202 @@
                                         pathname.push(link.data()[i].property);
                                         pathname.push(node.data()[link.data()[i].source].name);
-                                        //alert(tnode.data()[link.data()[i].source].fill);//style("stroke", function(d) { return '#ff0000'; });
                                 }
                         }
                 }while(path[(path.length-1)] != 0);
-                var resultText = "";
-                for (var i = 0;i < pathname.length; i++){
-                        resultText = resultText + pathname[i] + "<br><br>";
+                var resultText = "<h3>Selected Path</h3>";
+                for (var i = pathname.length;i > 0; i--){
+                        if(i % 2 == 1){
+                                resultText = resultText + "<span style=\"font-weight: bold;\">" + pathname[i - 1] + "</span><br><br>";
+                        }else{
+                                resultText = resultText + pathname[i - 1] + "<br><br>";
+                        }
                 }
                 document.getElementById("selectpath").innerHTML=(resultText);
-                document.getElementById("sendpath").style.display = "block";
+                document.getElementById("showpath").style.display = "block";
+
+                var xPosition = parseFloat(d3.select(this).attr("cx")) + 22;
+                var yPosition = parseFloat(d3.select(this).attr("cy") - document.getElementById("showpath").offsetHeight + document.getElementById("menu").offsetHeight) + 22;
+
+                if(xPosition < 0){
+                        xPosition = 0;
+                }
+                if(yPosition < 0){
+                        yPosition = 0;
+                }
+
+                document.getElementById("showpath").style.left = xPosition + "px"
+                document.getElementById("showpath").style.top = yPosition + "px"
+                document.getElementById("showpath").style.display = "block";
+
+                tlink
+                .text(function(d) {
+                        var linktext = "";
+                        for(var t = 0; t < path.length; t++){
+                                if(path[t] == d.target){
+                                        linktext = d.property;
+                                }
+                        }
+                        return linktext;
+                })
 
             if (!d. isDrag){
@@ -261 +245 @@
                         d3.selectAll(".node").style("stroke", function(d) { return '#ffffff'; });
                         d3.select(this).style("stroke-width", function(d) { return 2; });
-                        d3.select(this).style("stroke", function(d) { return '#ff0000'; });
+                        d3.select(this).style("stroke", function(d) { return '#0000ff'; });
             }
 
-// ZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZN
-// ZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZN
-
             d.isDrag = false;
-        });
-
-        // 逕ｻ髱｢繧ｯ繝ｪ繝�け縺ｧ繝ｪ繝ｳ繧ｯ驕ｸ謚櫁ｧ｣髯､
-        mapCircle.on("click", function(d){
-                d3.selectAll(".node").style("stroke-width", function(d) { return '1.5px'; });
-                d3.selectAll(".node").style("stroke", function(d) { return '#ffffff'; });
-                d3.selectAll(".link").style("stroke-width", function(d) { return Math.sqrt(d.value); });
         });
 
@@ -298 +272 @@
                 tlink
                 .attr("x", function(d) {return (node.data()[d.source].x + node.data()[d.target].x) / 2;})
-                .attr("y", function(d) {return (node.data()[d.source].y + node.data()[d.target].y) / 2;});
+                .attr("y", function(d) {return ((node.data()[d.source].y + node.data()[d.target].y) / 2) + 5;});
 
                 node
@@ -306 +280 @@
                 tnode
                 .attr("x", function(d) {return d.x;})
-                .attr("y", function(d) {return d.y;});
-
-                if (arrows['adr'] != undefined){
-                        arrows['adr']
-                    .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);})
-                .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);})
-                .attr("x2", function(d) {return node.data()[d.target].x;})
-                .attr("y2", function(d) {return node.data()[d.target].y;})
-                .attr("transform", function(d) {
-                        return 'rotate(25, '
-                                        + (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) + ', '
-                                        + (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) + ')';});
-                    }
-
-                if (arrows['adl'] != undefined){
-                    arrows['adl']
-                    .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);})
-                .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);})
-                .attr("x2", function(d) {return node.data()[d.target].x;})
-                .attr("y2", function(d) {return node.data()[d.target].y;})
-                .attr("transform", function(d) {
-                        return 'rotate(-25, '
-                                + (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) + ', '
-                                + (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) + ')';});
-                }
-
-                if (arrows['asr'] != undefined){
-                    arrows['asr']
-                    .attr("x1", function(d) {return node.data()[d.source].x;})
-                    .attr("y1", function(d) {return node.data()[d.source].y;})
-                    .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);})
-                    .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);})
-                .attr("transform", function(d) {
-                        return 'rotate(25, '
-                                        + (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) + ', '
-                                        + (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) + ')';});
-                }
-
-                if (arrows['asl'] != undefined){
-                    arrows['asl']
-                    .attr("x1", function(d) {return node.data()[d.source].x;})
-                .attr("y1", function(d) {return node.data()[d.source].y;})
-                .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);})
-                .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);})
-                .attr("transform", function(d) {
-                        return 'rotate(-25, '
-                                + (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) + ', '
-                                + (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) + ')';});
-            }
+                .attr("y", function(d) {
+                        var updown = 18;
+                        if(d.group % 2 == 1){
+                                updown = -8;
+                        }
+                        return d.y + updown;
+                });
         };
-/*
-        svg.on("mousemove", function() {
-                redraw();
+
+        svg.on("click", function() {
+                document.getElementById("showpath").style.display = "none";
+                d3.selectAll(".node").style("stroke-width", function(d) { return '1.5px'; });
+                d3.selectAll(".node").style("stroke", function(d) { return '#ffffff'; });
+                tlink
+                .text("");
         });
-*/
+
         redraw();
 }
 
-// 繝�せ繝医ョ繝ｼ繧ｿ縺ｮ菴懈�繝｡繧ｽ繝�ラ
-function make_testdata(tdepth, ret, parent, depth){
-        // ret縲‥epth縺梧悴螳夂ｾｩ縺ｪ繧峨�螳夂ｾｩ縺励※莉｣蜈･
+// 繝��繧ｿ縺ｮ菴懈�繝｡繧ｽ繝�ラ
+function make_data(tdepth, ret, parent, depth){
+        // ret縺梧悴螳夂ｾｩ縺ｪ繧峨�螳夂ｾｩ縺励※莉｣蜈･
         if (ret == undefined){
                 ret = new Object();
@@ -372 +308 @@
                 ret['links'] = new Array();
         }
-        /*
-        if (depth == undefined){
-                depth = 0;
-        }
-
-        // name縺ｫaaaa縲“roup縺ｫ豺ｱ縺輔€』縺ｨy縺ｫ蟷�→鬮倥＆縺ｮ蜊雁�繧偵そ繝�ヨ縺溶odes驟榊�縺ｫ霑ｽ蜉
-        ret['nodes'].push({'name':'aaaa', 'group': depth, 'x':(WIDTH/2), 'y':(HEIGHT/2)});
-        // 迴ｾ蝨ｨ縺ｮnodes縺ｮ謨ｰ縺ｫ蠢懊§縺櫑ndex繧堤函謌�
-        var newIndex = ret['nodes'].length-1;
-
-        // parent縺梧悴螳夂ｾｩ縺ｧ縺ｪ縺代ｌ縺ｰlinks驟榊�縺ｫsource繧恥arent縲》arget繧地ewIndex縺ｨ螳夂ｾｩ縺励※莉｣蜈･
-        if (parent != undefined){
-                ret['links'].push({'source':parent, 'target':newIndex, 'value':5});
-        }
-
-        // 謖�ｮ壹＆繧後◆豺ｱ縺輔↓閾ｳ縺｣縺ｦ縺�↑縺代ｌ縺ｰ
-        if (tdepth > depth){
-                // 繝ｩ繝ｳ繝€繝縺ｧ譛€螟ｧ蝗帙▽縺ｾ縺ｧ縺ｮ謨ｰ繧堤函謌舌€∝�蠎ｦ縺薙�繝｡繧ｽ繝�ラ繧貞他縺ｶ
-                // 縺薙％縺碁�ｬ｡蜻ｼ縺ｰ繧後※荳€谿ｵ縺ｮ豺ｱ縺輔＃縺ｨ縺ｫ譛€螟ｧ蝗帙▽縺ｮ蟄舌ｒ謖√▽繝ｩ繝ｳ繝€繝縺ｮ讒矩€縺後〒縺阪≠縺後ｋ
-                var c = Math.random()*4;
-                for (var i=0; i<c; i++){
-                        ret = make_testdata(tdepth, ret, newIndex, depth+1);
-                }
-        }
-        */
+
+        PATHNUM = 0;
+        MAXDEPTH = 0;
+        TREESPACE = 0;
+        DRAWHEIGHT = 0;
 
         var obj = JSON.parse(jsontext);
-
         // obj繝医ャ繝鈴嚴螻､縺ｮ謨ｰ縺縺醍ｹｰ繧願ｿ斐＠縺ｪ縺後ｉ
         for(var i = 0; i < obj['paths'].length; i++){
@@ -417 +332 @@
                                 MAXDEPTH = j+1;
                         }
-
                         // 縺薙％縺ｾ縺ｧ蜈ｱ騾壹Ν繝ｼ繝医↑繧�
                         if(isCommon){
@@ -449 +363 @@
                                         if(!isCommonNow){
                                                 isCommon = false;
-                                                ret['nodes'].push({'name':obj['paths'][i]['classLinks'][j]['linkedClassURI'], 'group': (j+1), 'x':(WIDTH/2), 'y':(HEIGHT/2), 'nodeid':ret['nodes'].length});
+                                                ret['nodes'].push({'name':obj['paths'][i]['classLinks'][j]['linkedClassURI'], 'group': (j+1), 'x':0, 'y':0, 'nodeid':ret['nodes'].length});
                                                 ret['links'].push({'source':source, 'target':ret['nodes'].length - 1, 'value':5, 'property':obj['paths'][i]['classLinks'][j]['propertyURI']});
                                                 source = ret['nodes'].length - 1;
@@ -458 +372 @@
 
                                         isCommon = false;
-                                        ret['nodes'].push({'name':obj['paths'][i]['classLinks'][j]['linkedClassURI'], 'group': (j+1), 'x':(WIDTH/2), 'y':(HEIGHT/2), 'nodeid':ret['nodes'].length});
+                                        ret['nodes'].push({'name':obj['paths'][i]['classLinks'][j]['linkedClassURI'], 'group': (j+1), 'x':0, 'y':0, 'nodeid':ret['nodes'].length});
                                         ret['links'].push({'source':source, 'target':ret['nodes'].length - 1, 'value':5, 'property':obj['paths'][i]['classLinks'][j]['propertyURI']});
                                         source = ret['nodes'].length - 1;
@@ -464 +378 @@
                         // 譌｢縺ｫ蜈ｱ騾壹Ν繝ｼ繝医〒縺ｪ縺�↑繧画眠隕剰ｿｽ蜉縺励※谺｡縺ｸ
                         }else{
-                                ret['nodes'].push({'name':obj['paths'][i]['classLinks'][j]['linkedClassURI'], 'group': (j+1), 'x':(WIDTH/2), 'y':(HEIGHT/2), 'nodeid':ret['nodes'].length});
+                                ret['nodes'].push({'name':obj['paths'][i]['classLinks'][j]['linkedClassURI'], 'group': (j+1), 'x':0, 'y':0, 'nodeid':ret['nodes'].length});
                                 ret['links'].push({'source':source, 'target':ret['nodes'].length - 1, 'value':5, 'property':obj['paths'][i]['classLinks'][j]['propertyURI']});
                                 source = ret['nodes'].length - 1;
@@ -470 +384 @@
 
                 }
-
-        }
-
-        /*
-
-        ret['nodes'].push({'name':jsontoobj['startClassURI'], 'group': 0, 'x':50, 'y':50});
-        ret['nodes'].push({'name':jsontoobj['classLinks'][0]['linkedClassURI'], 'group': 1, 'x':(WIDTH/2), 'y':(HEIGHT/2)});
-        ret['nodes'].push({'name':jsontoobj['classLinks'][1]['linkedClassURI'], 'group': 2, 'x':(WIDTH/2), 'y':(HEIGHT/2)});
-
-        ret['links'].push({'source':0, 'target':1, 'value':5, 'property':jsontoobj['classLinks'][0]['propertyURI']});
-        ret['links'].push({'source':1, 'target':2, 'value':5, 'property':jsontoobj['classLinks'][1]['propertyURI']});
-
-        ret['nodes'].push({'name':'root', 'group': 0, 'x':50, 'y':50});
-        ret['nodes'].push({'name':'a', 'group': 1, 'x':(WIDTH/2), 'y':(HEIGHT/2)});
-        ret['nodes'].push({'name':'b', 'group': 1, 'x':(WIDTH/2), 'y':(HEIGHT/2)});
-        ret['nodes'].push({'name':'c', 'group': 1, 'x':(WIDTH/2), 'y':(HEIGHT/2)});
-        ret['nodes'].push({'name':'a1', 'group': 2, 'x':(WIDTH/2), 'y':(HEIGHT/2)});
-        ret['nodes'].push({'name':'a2', 'group': 2, 'x':(WIDTH/2), 'y':(HEIGHT/2)});
-        ret['nodes'].push({'name':'b1', 'group': 2, 'x':(WIDTH/2), 'y':(HEIGHT/2)});
-        ret['nodes'].push({'name':'c1', 'group': 2, 'x':(WIDTH/2), 'y':(HEIGHT/2)});
-        ret['nodes'].push({'name':'c2', 'group': 2, 'x':(WIDTH/2), 'y':(HEIGHT/2)});
-        ret['nodes'].push({'name':'c3', 'group': 2, 'x':(WIDTH/2), 'y':(HEIGHT/2)});
-        ret['nodes'].push({'name':'a11', 'group': 3, 'x':(WIDTH/2), 'y':(HEIGHT/2)});
-        ret['nodes'].push({'name':'a12', 'group': 3, 'x':(WIDTH/2), 'y':(HEIGHT/2)});
-        ret['nodes'].push({'name':'a21', 'group': 3, 'x':(WIDTH/2), 'y':(HEIGHT/2)});
-        ret['nodes'].push({'name':'c21', 'group': 3, 'x':(WIDTH/2), 'y':(HEIGHT/2)});
-        ret['nodes'].push({'name':'c21', 'group': 3, 'x':(WIDTH/2), 'y':(HEIGHT/2)});
-        ret['nodes'].push({'name':'c23', 'group': 3, 'x':(WIDTH/2), 'y':(HEIGHT/2)});
-
-        ret['links'].push({'source':0, 'target':1, 'value':5});
-        ret['links'].push({'source':0, 'target':2, 'value':5});
-        ret['links'].push({'source':0, 'target':3, 'value':5});
-        ret['links'].push({'source':1, 'target':4, 'value':5});
-        ret['links'].push({'source':1, 'target':5, 'value':5});
-        ret['links'].push({'source':2, 'target':6, 'value':5});
-        ret['links'].push({'source':3, 'target':7, 'value':5});
-        ret['links'].push({'source':3, 'target':8, 'value':5});
-        ret['links'].push({'source':3, 'target':9, 'value':5});
-        ret['links'].push({'source':4, 'target':10, 'value':5});
-        ret['links'].push({'source':4, 'target':11, 'value':5});
-        ret['links'].push({'source':5, 'target':12, 'value':5});
-        ret['links'].push({'source':8, 'target':13, 'value':5});
-        ret['links'].push({'source':8, 'target':14, 'value':5});
-        ret['links'].push({'source':8, 'target':15, 'value':5});
-        */
+                PATHNUM++;
+        }
+        TREESPACE = (window.innerWidth - 200) / (MAXDEPTH + 1);
+        DRAWHEIGHT = TREESPACE / 2;
 
         // 縺ｧ縺阪◆邨先棡繧定ｿ斐☆
         return ret;
-}
-
-function make_json(data){
-
-        var ret = new Object();
-        ret['nodes'] = new Array();
-        ret['links'] = new Array();
-
-        for (var d=0; d<data.length; d++){
-                var label = data[d].label;
-                var session = data[d].p;
-                var link = data[d].o;
-
-                var centerIndex = get_item_index(ret['nodes'], label, 1);
-                var sessionIndex = get_item_index(ret['nodes'], get_resource_label(session), 2);
-                var linkIndex = get_item_index(ret['nodes'], get_resource_label(link), d + 3);
-
-                add_link(ret['links'], centerIndex, sessionIndex, 10);
-                add_link(ret['links'], sessionIndex, linkIndex, 1);
-        }
-
-        set_map_location(0, ret['nodes'], ret['links']);
-
-
-        return ret;
-}
-
-function get_resource_label(resource){
-        var i = resource.lastIndexOf('/');
-        var ret = resource;
-        if (i > 0){
-                ret = resource.substring(i + '/'.length);
-        }
-        ret = ret.replace(/%20/g, " ");
-        return ret;
-}
-
-function get_item_index(item, label, group){
-        for (var i=0; i<item.length; i++){
-                if (item[i].name == label){
-                        return i;
-                }
-        }
-
-        // TODO 蠎ｧ讓呎ｱｺ螳壹Ο繧ｸ繝�け繧剃ｽ懈�縺吶ｋ
-        item.push({'name':label, 'group': group, 'x':(WIDTH/2), 'y':(HEIGHT/2)});
-
-        return item.length-1;
-}
-
-function add_link(links, source, dest, value){
-        for (var i=0; i<links.length; i++){
-                if (links[i].source == source && links[i].target == dest){
-                        return;
-                }
-        }
-        links.push({'source':source, 'target':dest, 'value':value});
-
-        return;
 }
 
@@ -586 +400 @@
                 depth = 0;
         }
+/*
         // fromAngle縺梧悴螳夂ｾｩ縺ｪ繧峨�0繧偵そ繝�ヨ
         if (fromAngle == undefined){
@@ -594 +409 @@
                 toAngle = 1;
         }
+*/
 
         // 蜷�ｨｮ蛻晄悄蛹�
@@ -619 +435 @@
         }
 
-
+        if(myNodeIndex != 0){
+                DRAWHEIGHT += (TREESPACE / 2);
+                var x = (depth * TREESPACE) + (TREESPACE / 2);
+                var y = DRAWHEIGHT;
+                nodes[myNodeIndex].x = x;
+                nodes[myNodeIndex].y = y;
+        }else{
+                var x = TREESPACE / 2;
+                var y = (TREESPACE / 2) * (PATHNUM / 2) + (TREESPACE / 4);
+                nodes[myNodeIndex].x = x;
+                nodes[myNodeIndex].y = y;
+        }
+
+        /*
         var x = (WIDTH/2) + depth * (WIDTH / (MAXDEPTH * 2 + 1)) * Math.sin(2 * 3.14 * ((toAngle + fromAngle) / 2));
         var y = (HEIGHT/2) + depth * (HEIGHT / (MAXDEPTH * 2 + 1)) * Math.cos(2 * 3.14 * ((toAngle + fromAngle) / 2));
@@ -625 +454 @@
         nodes[myNodeIndex].y = y;
 
-
+        CIRCLE_SIZE = (WIDTH / (MAXDEPTH * 2 + 1));
+        */
 
         children = get_children(myNodeIndex, links);
 
         for (var i=0; i<children.length; i++){
+                if(i == 0){
+                        DRAWHEIGHT -= (TREESPACE / 2);
+                }
                 var child = children[i];
                 set_map_location(child, nodes, links, depth+1, fromAngle + ((toAngle - fromAngle) / children.length) * i, fromAngle + ((toAngle - fromAngle) / children.length) * (i+1));
@@ -730 +563 @@
                 success : function(sparql) {
                         document.path.sparql.value = sparql;
+                        document.getElementById("showpath").style.display = "none";
+                        window.scrollTo(0, 0);
                 },
                 error : function(XMLHttpRequest, textStatus, errorThrown) {
@@ -746 +581 @@
 <body>
 
-<div id="graph">
-</div>
-<div id="right" style="position: absolute; top:0px; left:0px; width:200px; padding: 20px; background-color: #cccccc;">
-
-        <div id="endpoint">
-                <form name="endpoint">
-                        <input type="text" style="width: 200px;" name="inputendpoint">
-                        <select size=1 name="selectendpoint" style="width: 200px;">
-                                <option value="input">Textbox
-                        </select>
-                        <input type="button" name="setendpoint" value="SetEndPoint" onClick="setEndpoint()">
-                </form>
+<div id="menu" style="position: absolute; overflow:hidden; top:0px; left:0px; width: 1000px; background-color: #cccccc;">
+
+        <div id="setting" style="margin: 15px; float: left;">
+                <div id="endpoint">
+                        <form name="endpoint">
+                                <input type="text" style="width: 200px;" name="inputendpoint"><br>
+                                <select size=1 name="selectendpoint" style="width: 200px;">
+                                        <option value="input">Textbox
+                                </select><br>
+                                <input type="button" name="setendpoint" value="SetEndPoint" onClick="setEndpoint()">
+                        </form>
+                </div>
+                <div id="seclass" style="margin-top: 30px;">
+                        <form name="seclass">
+                                StartClass<br>
+                                <select size=1 name="startclass" style="width: 200px;">
+                                </select><br>
+                                EndClass<br>
+                                <select size=1 name="endclass" style="width: 200px;">
+                                </select><br>
+                                <input type="button" name="setclass" value="SetClass" onClick="setSEClass()">
+                        </form>
+                </div>
         </div>
-        <div id="seclass" style="margin: 15px 0px; display: none;">
-                <form name="seclass">
-                        StartClass<br>
-                        <select size=1 name="startclass" style="width: 200px;">
-                        </select>
-                        EndClass<br>
-                        <select size=1 name="endclass" style="width: 200px;">
-                        </select>
-                        <input type="button" name="setclass" value="SetClass" onClick="setSEClass()">
-                </form>
-                <hr>
-        </div>
-        <div id="selectpath" style="word-wrap: break-word;">
-        </div>
-        <div id="sendpath" style="display: none;">
-                <hr>
+
+        <div id="editing" style="margin: 15px 25px; float: right;">
                 <form name="path">
-                        <input type="button" name="getsparql" value="Get SPARQL" onClick="getSPARQL()">
-                        <textarea name="sparql" style="width: 200px; height: 200px;"></textarea><br><br>
-                        <input type="button" name="sendsparql" value="Send SPARQL" onClick="sendSPARQL()">
+                        <textarea name="sparql" style="width: 300px; height: 180px;"></textarea><br>
+                        <input type="button" name="sendsparql" value="Send SPARQL" onClick="sendSPARQL()"><br>
                 </form>
         </div>
 </div>
+<div id="graph" style="position: absolute; top:0px; left:0px;">
+</div>
+<div id="showpath" style="display: none;">
+        <div id="selectpath" style="word-wrap: break-word;">
+        </div>
+        <input type="button" name="getsparql" value="Get SPARQL" onClick="getSPARQL()">
+</div>
 </body>
 </html>