チェンジセット 129 : SPARQLBuilderWWW/web/jsgui.html

更新日時:

2014/08/11 10:48:16 (10 年 前)

更新者:

lenz

ログメッセージ:

ノード上に表示するURIを/及び#で区切った末尾部分のみになるよう短縮

子を持つノードをクリックした際に畳み込む処理を追加

ファイル:

• SPARQLBuilderWWW/web/jsgui.html (変更) (18 diff)

SPARQLBuilderWWW/web/jsgui.html

@@ -127 +127 @@
         DURATION = 0;
 
+        /*
         // 繝峨Λ繝�げ譎ゅ�蜃ｦ逅�
         var drag = d3.behavior.drag().on("drag", function(d,i) {
@@ -136 +137 @@
             redraw();
         });
+        */
 
         // SVG縺ｮ霑ｽ蜉
@@ -156 +158 @@
         .enter().append("line")
         .attr("class", "link")
-        .style("stroke-width", function(d) { return Math.sqrt(d.value); });
+        .style("stroke-width", function(d) { return Math.sqrt(d.value);});
 
         // 繝弱�繝峨�菴懈�
@@ -169 +171 @@
         .style("stroke-width", function(d) { return '1.5px'; })
         .style("fill", function(d) { return color(d.group); })
-        .style("cursor", function(d) { return 'pointer'; })
-        .call(drag);
+        .style("cursor", function(d) { return 'pointer'; });
+        //.call(drag);
 
         // 繝弱�繝峨ユ繧ｭ繧ｹ繝医�菴懈�
@@ -184 +186 @@
         .style("stroke-width", function(d) { return '1.5px'; })
         .style("text-anchor", function(d) { return 'middle'; })
-        .style("pointer-events", "none")
-        .call(drag);
+        .style("pointer-events", "none");
+        //.call(drag);
 
         // 繝ｪ繝ｳ繧ｯ繝�く繧ｹ繝医�菴懈�
@@ -229 +231 @@
 
                                 document.getElementById("selectpath").innerHTML=(resultText);
-                                document.getElementById("showpath").style.display = "block";
 
                                 if(d.group > (MAXDEPTH - 2)){
@@ -249 +250 @@
                                 document.getElementById("showpath").style.left = xPosition + "px"
                                 document.getElementById("showpath").style.top = yPosition + "px"
-                                document.getElementById("showpath").style.display = "block";
+                                //document.getElementById("showpath").style.display = "block";
 
                         }else{
@@ -304 +305 @@
                                 if(d.view == "no"){
                                         for(var t = 0; t < path.length; t++){
-                                                if(path[t] == d.target){
-                                                        linktext = d.property;
+                                                if(path[t] == d.target && node.data()[d.target].view != "hide"){
+                                                        var propertytext = d.property
+                                                        var linksplit1 = propertytext.split("/");
+                                                        var linksplit2 = linksplit1[linksplit1.length - 1];
+                                                        var linksplit3 = linksplit2.split("#");
+                                                        linktext = linksplit3[linksplit3.length - 1];
                                                         d.view = "now";
                                                 }
                                         }
-                                }else if(d.view == "fix"){
-                                        linktext = d.property;
+                                }else if(d.view == "fix" && node.data()[d.target].view != "hide"){
+                                        var propertytext = d.property
+                                        var linksplit1 = propertytext.split("/");
+                                        var linksplit2 = linksplit1[linksplit1.length - 1];
+                                        var linksplit3 = linksplit2.split("#");
+                                        linktext = linksplit3[linksplit3.length - 1];
                                 }
                                 return linktext;
@@ -339 +348 @@
                 });
 
+                //d.hideparent = d.nodeid;
+
+                var childs = [];
+                var prevchilds = [];
+                prevchilds.push(d.nodeid);
+
+                do{
+                        var tmpchilds = [];
+                        var curchilds = [];
+                        for(var p = 0; p < prevchilds.length; p++){
+                                tmpchilds = get_children(prevchilds[p], json['links']);
+                                curchilds = curchilds.concat(tmpchilds);
+                        }
+                        prevchilds = curchilds;
+                        childs = childs.concat(curchilds);
+
+                }while(curchilds.length != 0);
+
+                var childy = d.y;
+                for(var c = 0; c < childs.length; c++){
+                        if(node.data()[childs[c]].y < childy){
+                                childy = node.data()[childs[c]].y;
+                        }
+                }
+
+                d.y = childy;
+
+                var maxdy = 0;
+                var mindy = 0;
+
+                for(var c = 0; c < childs.length; c++){
+                        if(node.data()[childs[c]].view != "hide"){
+                                var dy = node.data()[childs[c]].y - d.y;
+                                if(dy > maxdy){
+                                        maxdy = dy;
+                                }
+                                node.data()[childs[c]].x = d.x;
+                                node.data()[childs[c]].y = d.y;
+                                node.data()[childs[c]].dy = dy;
+                                node.data()[childs[c]].view = "hide";
+                                node.data()[childs[c]].hideparent = d.nodeid;
+                        }else{
+                                if(node.data()[childs[c]].hideparent == d.nodeid){
+                                        node.data()[childs[c]].x = d.x + (TREESPACE * (node.data()[childs[c]].group - d.group));
+                                        node.data()[childs[c]].y = node.data()[childs[c]].y + node.data()[childs[c]].dy;
+                                        if(-node.data()[childs[c]].dy < mindy){
+                                                mindy = -node.data()[childs[c]].dy;
+                                        }
+                                        node.data()[childs[c]].view = "appear";
+                                        node.data()[childs[c]].hideparent = -1;
+                                }
+                        }
+                }
+
+                node
+                .attr("r", function(d){
+                        if(d.view == "appear"){
+                                d.view = "no";
+                        }else if(d.y > childy){
+                                d.y = d.y - maxdy - mindy;
+                        }
+                        if(d.view == "hide"){
+                                d.x = node.data()[d.hideparent].x;
+                                d.y = node.data()[d.hideparent].y;
+                        }
+                        if(d.nodeid == 0){
+                                d.y = childy;
+                        }
+                        return (NODEHEIGHT / 2);
+                });
+
                 tlink
                 .text(function(d) {
                         var linktext = "";
-                        if(d.view == "now" || d.view == "fix"){
-                                linktext = d.property;
+                        if((d.view == "now" || d.view == "fix") && (node.data()[d.target].view != "hide")){
+                                var propertytext = d.property
+                                var linksplit1 = propertytext.split("/");
+                                var linksplit2 = linksplit1[linksplit1.length - 1];
+                                var linksplit3 = linksplit2.split("#");
+                                linktext = linksplit3[linksplit3.length - 1];
                                 d.view = "fix";
                         }
                         return linktext;
                 });
+
+
+                redraw();
 
         }).on("mouseout", function(d){
                 d.isDrag = false;
         });
-
-        // 蝓ｺ譛ｬ繝吶け繝医Ν邂怜�
-        var vec = function(sx, sy, dx, dy){
-                var vx = (dx - sx);
-                var vy = (dy - sy);
-                var dist = Math.sqrt(Math.pow(vx, 2) + Math.pow(vy, 2));
-                var ret = [];
-                ret.x = vx / dist;
-                ret.y = vy / dist;
-
-                return ret;
-        };
 
         var redraw = function (){
@@ -384 +459 @@
                 .duration(DURATION)
                 .attr("cx", function(d) {return d.x;})
-                .attr("cy", function(d) {return d.y;});
+                .attr("cy", function(d) {return d.y;})
+                .style("opacity", function(d){
+                        var opa = 1.0;
+                        if(d.view == "hide"){
+                                opa = 0.0;
+                        }
+                        return opa;
+                })
+                .style("fill", function(d) {
+                        var fcolor = color(d.group);
+
+                        for(var n = 0; n < node.data().length; n++){
+                                if(d.nodeid == node.data()[n].hideparent){
+                                        fcolor = "ffaaaa";
+                                }
+                        }
+                        return fcolor;
+                })
+                .style("pointer-events", function(d){
+                        var pe = "auto";
+                        if(d.view == "hide"){
+                                pe = "none";
+                        }
+                        return pe;
+                });
 
                 tnode
@@ -395 +494 @@
                                 updown = -(NODEHEIGHT * 0.2);
                         }
+                        if(d.view == "now" || d.view == "moved"){
+                                //updown = 5;
+                        }
                         return d.y + updown;
+                })
+                .text(function(d){
+                        var nt = d.name;
+                        if(d.view == "hide"){
+                                nt = "";
+                        }
+                        return nt;
                 });
 
                 DURATION = 500;
+
         };
 
@@ -408 +518 @@
                 node
                 .style("stroke", function(d){
-                        d.view = "no";
+                        if(d.view != "hide"){
+                                d.view = "no";
+                        }
                         return "#fafafa";
                 });
@@ -499 +611 @@
                                         if(!isCommonNow){
                                                 isCommon = false;
-                                                ret['nodes'].push({'name':obj['paths'][i]['classLinks'][j]['linkedClassURI'], 'group': (j+1), 'x':0, 'y':0, 'nodeid':ret['nodes'].length, 'view' : 'no'});
+                                                ret['nodes'].push({'name':obj['paths'][i]['classLinks'][j]['linkedClassURI'], 'group': (j+1), 'x':0, 'y':0, 'dy':0, 'nodeid':ret['nodes'].length, 'view' : 'no'});
                                                 ret['links'].push({'source':source, 'target':ret['nodes'].length - 1, 'value':5, 'property':obj['paths'][i]['classLinks'][j]['propertyURI'], 'view' : 'no'});
                                                 source = ret['nodes'].length - 1;
@@ -508 +620 @@
 
                                         isCommon = false;
-                                        ret['nodes'].push({'name':obj['paths'][i]['classLinks'][j]['linkedClassURI'], 'group': (j+1), 'x':0, 'y':0, 'nodeid':ret['nodes'].length, 'view' : 'no'});
+                                        ret['nodes'].push({'name':obj['paths'][i]['classLinks'][j]['linkedClassURI'], 'group': (j+1), 'x':0, 'y':0, 'dy':0, 'nodeid':ret['nodes'].length, 'view' : 'no'});
                                         ret['links'].push({'source':source, 'target':ret['nodes'].length - 1, 'value':5, 'property':obj['paths'][i]['classLinks'][j]['propertyURI'], 'view' : 'no'});
                                         source = ret['nodes'].length - 1;
@@ -514 +626 @@
                         // 譌｢縺ｫ蜈ｱ騾壹Ν繝ｼ繝医〒縺ｪ縺�↑繧画眠隕剰ｿｽ蜉縺励※谺｡縺ｸ
                         }else{
-                                ret['nodes'].push({'name':obj['paths'][i]['classLinks'][j]['linkedClassURI'], 'group': (j+1), 'x':0, 'y':0, 'nodeid':ret['nodes'].length, 'view' : 'no'});
+                                ret['nodes'].push({'name':obj['paths'][i]['classLinks'][j]['linkedClassURI'], 'group': (j+1), 'x':0, 'y':0, 'dy':0, 'nodeid':ret['nodes'].length, 'view' : 'no'});
                                 ret['links'].push({'source':source, 'target':ret['nodes'].length - 1, 'value':5, 'property':obj['paths'][i]['classLinks'][j]['propertyURI'], 'view' : 'no'});
                                 source = ret['nodes'].length - 1;
@@ -660 +772 @@
 function setSEClass(){
 
-        MAXDEPTH = 0;
-
         var sel = $("*[name=selectendpoint]").val();
 
@@ -667 +777 @@
                 sel = $("*[name=inputendpoint]").val();
         }
+
+        MAXDEPTH = 0;
 
         document.getElementById("selectpath").innerHTML = "";
@@ -678 +790 @@
                 url : getPathListURL,
                 data: {
+                    ep: sel,
                     startclass: selstart,
-                    endclass: selend,
-                    ep: sel
+                    endclass: selend
   },
                 dataType: 'text',