チェンジセット 232 : SPARQLBuilderWWW

更新日時:

2015/02/06 15:51:58 (10 年 前)

更新者:

lenz

ログメッセージ:

BH14.14の作業成果

新UIと埋め込み方式の変更、結果のダウンロードボタン

残タスク：サンプル関係。サンプルボタンもGETでいきなりオープンも指定結果のパーマリンク作成もまだ

パス:

SPARQLBuilderWWW/web

ファイル:

• newgui.html (追加)
• newsparqlbuilder.css (追加)
• newsparqlbuilder.js (追加)
• select2.css (追加)
• select2.min.js (追加)
• sparqlbuilder.js (変更) (12 diff)

SPARQLBuilderWWW/web/sparqlbuilder.js

@@ -232 +232 @@
         // SVG縺ｮ蟷�→鬮倥＆繧定ｨｭ螳夲ｼ亥ｹ�ｼ夂判髱｢縺�▲縺ｱ縺�€€鬮倥＆�壹ヱ繧ｹ縺ｮ謨ｰ縺ｫ蠢懊§險ｭ螳夲ｼ�
         var width = this.width;
-        var height = ((this.NODEHEIGHT * 1.5) * this.PATHNUM) + (this.NODEHEIGHT / 2);
+        var height = (width * 9 / 16);
+        var graphheight = ((this.NODEHEIGHT * 1.5) * this.PATHNUM) + (this.NODEHEIGHT / 2);
+
+        var scoreleftmargin = this.NODEHEIGHT * 1.5;
 
         // 繧ｫ繝ｩ繝ｼ繧貞叙蠕�
@@ -242 +245 @@
         var svg = d3.select("#sparqlBuilderGraph").append("svg")
             .attr("width", width)
-            .attr("height", height);
+            .attr("height", height)
+            .attr("viewBox", "0 0 " + width + " " + height)
+            .on("mousewheel", function(){
+                var vb = svg.attr("viewBox");
+                var spvb = vb.split(" ");
+
+                var vby = (parseInt(spvb[1]) - event.wheelDelta);
+
+                if(vby < 0){
+                        vby = 0;
+                }else if(vby > (graphheight - height)){
+                        vby = (graphheight - height);
+                }else{
+                        event.preventDefault();
+                }
+
+                svg.attr("viewBox", "0 " + vby + " " + width + " " + height);
+            });
 
         // 閭梧勹縺ｮ霑ｽ蜉
@@ -250 +270 @@
             .attr("y", 0)
             .attr("width", width)
-            .attr("height", height)
+            .attr("height", graphheight)
             .attr("fill", "#fafafa");
 
@@ -296 +316 @@
             .style("fill", function(d) { return '#000000'; })
             .style("text-anchor", function(d) { return 'middle'; });
+
+        // nodes驟榊�繧呈ｸ｡縺励ヮ繝ｼ繝峨ユ繧ｭ繧ｹ繝医�菴懈�
+        var tscore = svg.selectAll("text.score")
+            .data(json.nodes)
+            .enter().append("svg:text")
+            .attr("class", "tscore")
+            .attr("x", function(d) { return (d.x + scoreleftmargin); })
+            .attr("y", function(d) { return d.y; })
+            .text(function(d) { return d.score;
+            })
+            .style("fill", function(d) { return '#FF0000'; })
+            .style("text-anchor", function(d) { return 'middle'; })
+            .style("pointer-events", "none");
 
         // 繝槭え繧ｹ縺ｮ蜍輔″繧ｫ繧ｦ繝ｳ繝医ｒ繝ｫ繝ｼ繝医↓謖√◆縺帙ｋ
@@ -353 +386 @@
                     // 繝��繝ｫ繝√ャ繝励�蜀�ｮｹ繧呈嶌縺肴鋤縺�
                     document.getElementById("sparqlBuilderSelectpath").innerHTML=(resultText);
-                    document.getElementById("sparqlBuilderShowpath").style.display = "block";
+                    if(svg.attr("width") == width){
+                        document.getElementById("sparqlBuilderShowpath").style.display = "block";
+                    }
 
                     // 繧ｵ繝ｼ繝悶Ξ繝�ヨ縺ｫ騾√ｊ霑斐☆繝代せ繧ｪ繝悶ず繧ｧ繧ｯ繝医ｒ菫晏ｭ�
@@ -518 +553 @@
                 });
 
-            // 縺薙％縺九ｉ蟄舌ヮ繝ｼ繝峨�逡ｳ縺ｿ霎ｼ縺ｿ蜃ｦ逅�ｼ育樟蝨ｨ縺ｯ蟒�ｭ｢縲∝ｿｵ縺ｮ縺溘ａ繧ｳ繝ｼ繝峨�谿九＠縺ｦ縺翫￥��
-            /*
-            var childs = [];
-            var prevchilds = [];
-            prevchilds.push(d.nodeid);
-
-            //
-            do{
-                var tmpchilds = [];
-                var curchilds = [];
-                for(var p = 0; p < prevchilds.length; p++){
-                    tmpchilds = this.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 + (this.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 (this.NODEHEIGHT / 2);
-            });
-            */
-
             // 蜷�Μ繝ｳ繧ｯ縺ｫ蟇ｾ縺�
             tlink
@@ -631 +593 @@
                 .attr("y2", function(d) {return node.data()[d.target].y;});
 
-            // 蜷�Μ繝ｳ繧ｯ繝�く繧ｹ繝医↓縺､縺�※險ｭ螳壹＆繧後◆菴咲ｽｮ縺ｫ蜀肴緒逕ｻ
-            tlink
-                .transition()
-                .duration(duration)
-                .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) + 5;});
-
             // 蜷�ヮ繝ｼ繝峨↓縺､縺�※險ｭ螳壹＆繧後◆菴咲ｽｮ縺ｫ蜀肴緒逕ｻ�医°縺､謚倥ｊ縺溘◆縺ｾ繧御ｸｭ縺ｮ蝣ｴ蜷医�謠冗判蛻�ｲ仙�逅�ｼ�
             node
@@ -643 +598 @@
                 .duration(duration)
                 .attr("cx", function(d) {return d.x;})
-                .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 = d.nodecolor;
-
-                    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;
-                });
+                .attr("cy", function(d) {return d.y;});
 
             // 蜷�ヮ繝ｼ繝峨ユ繧ｭ繧ｹ繝医↓縺､縺�※險ｭ螳壹＆繧後◆菴咲ｽｮ縺ｫ蜀肴緒逕ｻ縲√ユ繧ｭ繧ｹ繝域緒逕ｻ菴咲ｽｮ繧剃ｸ贋ｸ九↓謖ｯ繧具ｼ医°縺､謚倥ｊ縺溘◆縺ｾ繧御ｸｭ縺ｮ蝣ｴ蜷医�謠冗判蛻�ｲ仙�逅�ｼ�
@@ -683 +614 @@
                 // 縺昴�蛟､繧帝ｫ倥＆縺ｫ霑斐☆縺薙→縺ｧ繝�く繧ｹ繝域緒逕ｻ菴咲ｽｮ縺御ｺ偵＞驕輔＞縺ｫ縺ｪ繧�
                 return d.y + updown;
-            })
-            // 謚倥ｊ逡ｳ縺ｿ迥ｶ諷九↑繧峨ユ繧ｭ繧ｹ繝郁｡ｨ遉ｺ繧呈ｶ医☆
-            .text(function(d){
-                var nodetext = d.name
-                if(d.view == "hide"){
-                    nodetext = "";
-                }
-                return nodetext;
             });
+
+            // 蜷�Μ繝ｳ繧ｯ繝�く繧ｹ繝医↓縺､縺�※險ｭ螳壹＆繧後◆菴咲ｽｮ縺ｫ蜀肴緒逕ｻ
+            tlink
+                .transition()
+                .duration(duration)
+                .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) + 5;});
 
         };
@@ -723 +653 @@
                     return "#999";
                 });
+
+            if(svg.attr("width") == width){
+                    svg.attr("width", (width / 5))
+                    .attr("height", (width * 9 / 16 / 5))
+                    .attr("viewBox", "0 0 " + width + " " + (width * 9 / 16));
+            }else{
+                    svg.attr("width", width)
+                    .attr("height", height)
+                    .attr("viewBox", "0 0 " + width + " " + height);
+            }
 
         });
@@ -799 +739 @@
         // 蜈ｱ騾壹Ν繝ｼ繝亥愛螳壹ｒtrue縺ｫ
         var isCommon = true;
+
+        var score = obj[i]['score'];
 
         // classLinks縺ｮ謨ｰ縺縺醍ｹｰ繧願ｿ斐＠縺ｪ縺後ｉ
@@ -866 +808 @@
         }
         ret['nodes'][ret['nodes'].length - 1]['path'] = obj[i];
+        ret['nodes'][ret['nodes'].length - 1]['score'] = score;
         ret['nodes'][ret['nodes'].length - 1]['nodecolor'] = '#8cddc0';
         this.PATHNUM++;