root/SPARQLBuilderWWW/web/jsgui.html @ 180

リビジョン 170, 27.9 KB (コミッタ: atsuko, 10 年 前)

URIエンコーディングに関するエラーを訂正
行番号 
1<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
2<html>
3<head>
4<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
5<title>SPARQL Builder GUI</title>
6
7<style>
8
9.link {
10  stroke: #999;
11  stroke-opacity: .6;
12}
13.tlink {
14  stroke: #999;
15  stroke-opacity: .6;
16}
17
18#showpath {
19        position: absolute;
20        width: 200px;
21        height: auto;
22        padding: 15px;
23        -webkit-border-radius: 20px;
24        border-radius: 20px;
25        -webkit-box-shadow: 0px 0px 10px #000000;
26        box-shadow: 0px 0px 10px #000000;
27        background-image: -moz-linear-gradient(top, #eeeeff, #ffffff);
28        background-image: -ms-linear-gradient(top, #eeeeff, #ffffff);
29        background-image: -o-linear-gradient(top, #eeeeff, #ffffff);
30        background-image: -webkit-gradient(linear, center top, center bottom, from(#eeeeff), to(#ffffff));
31        background-image: -webkit-linear-gradient(top, #eeeeff, #ffffff);
32        background-image: linear-gradient(top, #eeeeff, #ffffff);
33        -webkit-background-clip: padding-box;
34        background-clip: padding-box;
35}
36
37</style>
38
39<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
40<script type="text/javascript" src="d3.min.js"></script>
41<!--<script type="text/javascript" src="http://lod.hozo.jp/SparqlFinder/js/template.js" charset="UTF-8"></script>-->
42<script>
43<!--
44
45// SETURLSETURLSETURLSETURLSETURLSETURLSETURLSETURLSETURLSETURLSETURLSETURL
46// SETURLSETURLSETURLSETURLSETURLSETURLSETURLSETURLSETURLSETURLSETURLSETURL
47
48// 隱ｭ縺ｿ霎ｼ縺ｿ譎ゅ↓螳溯｡後€ゅお繝ｳ繝峨�繧､繝ｳ繝医�繝ｪ繧ｹ繝医ｒ騾壼ｸｸ縺ｮ驟榊�縺ｧ霑斐＆繧後ｋ縺薙→縺ｧ蛻昴ａ縺ｮ驕ｸ謚櫁い縺ｫ謖ｿ蜈･
49var getEndPointsURL = "eplist";
50
51// 繧ｨ繝ｳ繝峨�繧､繝ｳ繝医′驕ｸ謚槭＆繧後◆繧峨◎縺ｮURL繧弾p縺ｨ縺�≧蜷榊燕縺ｧ騾∽ｿ｡縲√け繝ｩ繧ｹ繝ｪ繧ｹ繝医ｒ騾壼ｸｸ縺ｮ驟榊�縺ｧ霑斐＆繧後ｋ縺薙→縺ｧ繧ｯ繝ｩ繧ｹ縺ｮ驕ｸ謚櫁い縺ｫ謖ｿ蜈･
52var getClassListURL = "clist";
53
54// 繧ｯ繝ｩ繧ｹ莠後▽縺碁∈謚槭＆繧後◆繧峨◎縺ｮ繧ｯ繝ｩ繧ｹ蜷阪ｒstartclass縲‘ndclass縺ｨ縺�≧蜷榊燕縺ｧ縺昴ｌ縺槭ｌ騾∽ｿ｡縲√◎縺ｮ莠後▽繧堤ｵ舌�繝代せ縺ｮ繝ｪ繧ｹ繝医ｒJSON蠖｢蠑上�繝�く繧ｹ繝医〒霑斐＆繧後ｋ縺薙→縺ｧ縺昴ｌ繧偵げ繝ｩ繝輔↓謠冗判
55var getPathListURL = "plist";
56
57// 繝代せ縺碁∈謚槭＆繧後◆繧泳sonpath縺ｨ縺�≧蜷榊燕縺ｧ繝代せ繧帝€壼ｸｸ縺ｮ驟榊�縺ｧ騾∽ｿ｡縲ヾPARQL繧ｯ繧ｨ繝ｪ繧偵ユ繧ｭ繧ｹ繝医〒蜿励￠蜿悶ｊ繝�く繧ｹ繝医お繝ｪ繧｢縺ｫ謖ｿ蜈･
58var getSPARQLURL = "sparql";
59
60// 縺ｧ縺阪≠縺後▲縺欖PARQL繧帝€∽ｿ｡縺吶ｋURL�域悴螳溯｣�ｼ�
61
62// SETURLSETURLSETURLSETURLSETURLSETURLSETURLSETURLSETURLSETURLSETURLSETURL
63// SETURLSETURLSETURLSETURLSETURLSETURLSETURLSETURLSETURLSETURLSETURLSETURL
64
65
66// 騾√ｉ繧後◆繝代せ縺ｮ菫晏ｭ伜�
67var jsontext = "";
68// 霑斐☆繝代せ縺ｮ繧ｪ繝悶ず繧ｧ繧ｯ繝�
69var pathobj = [];
70
71// 騾√ｉ繧後◆繝代せ縺ｮ謨ｰ
72var PATHNUM = 0;
73// 騾√ｉ繧後◆繝代せ縺ｮ譛€螟ｧ豺ｱ縺�
74var MAXDEPTH = 0;
75// 繝代せ縺ｮ繝弱�繝蛾俣菴咏區
76var TREESPACE = 0;
77// 繝代せ髢薙�荳贋ｸ倶ｽ咏區
78var DRAWHEIGHT = 0;
79// 繝弱�繝峨�螟ｧ縺阪＆
80var NODEHEIGHT = 50;
81// 繝��繝ｫ繝√ャ繝励ｒ髫縺吶◆繧√�蜍輔″蛻､螳夂畑
82var MOUSEMOVED = 0;
83
84
85// 髢九＞縺溘ｉ蜷�ｨｮ繧､繝ｳ繧ｿ繝ｼ繝輔ぉ繝ｼ繧ｹ驛ｨ蜩√�繧ｵ繧､繧ｺ繧貞､画峩縲√お繝ｳ繝峨�繧､繝ｳ繝井ｸ€隕ｧ繧貞叙蠕励＠繧ｻ繝�ヨ
86$(window).load(function() {
87
88        // 荳企Κ繝｡繝九Η繝ｼ縺ｮ蟷�ｼ育判髱｢繧ｵ繧､繧ｺ縺ｨ蜷後§��
89        var menuwidth = window.innerWidth + "px";
90        // 荳企Κ繝｡繝九Η繝ｼ蟾ｦ蛛ｴ驛ｨ蛻�ｼ亥�蜉帶ｬ�ｼ峨�繧ｵ繧､繧ｺ
91        var inputswidth = ((window.innerWidth - 100) / 2) + "px";
92        // 縺昴ｌ縺槭ｌ縺ｫ繧ｻ繝�ヨ
93        document.getElementById("menu").style.width = menuwidth;
94        document.endpoint.inputendpoint.style.width = inputswidth;
95        document.endpoint.selectendpoint.style.width = inputswidth;
96        document.seclass.startclass.style.width = inputswidth;
97        document.seclass.endclass.style.width = inputswidth;
98        document.path.sparql.style.width = inputswidth;
99        document.path.sendsparql.style.width = inputswidth;
100        // 繧ｰ繝ｩ繝墓緒逕ｻ驛ｨ蛻�ｒ荳企Κ繝｡繝九Η繝ｼ逶ｴ蠕後↓謗･縺吶ｋ繧医≧縺ｫ險ｭ螳�
101        document.getElementById("graph").style.top = document.getElementById("menu").offsetHeight + "px";
102
103        // 繧ｨ繝ｳ繝峨�繧､繝ｳ繝井ｸ€隕ｧ繧貞叙蠕励＠繧ｻ繝�ヨ
104        $.ajax({
105                type: "GET",
106                url : getEndPointsURL,
107                dataType: 'json',
108                success : function(data) {
109                        setEndpoints(data);
110                },
111                error : function(XMLHttpRequest, textStatus, errorThrown) {
112                        alert("繝ｪ繧ｯ繧ｨ繧ｹ繝域凾縺ｫ縺ｪ繧薙ｉ縺九�繧ｨ繝ｩ繝ｼ縺檎匱逕溘＠縺ｾ縺励◆�� + textStatus +":\n" + errorThrown);
113                }
114        });
115
116});
117
118// 謠冗判蜃ｦ逅�
119function view_map(){
120
121        // make_data繝｡繧ｽ繝�ラ縺ｮ邨先棡繧貞叙蠕�
122        var json = make_data(0);
123
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
134        // SVG縺悟ｭ伜惠縺吶ｋ縺ｪ繧峨�蜑企勁
135        if (d3.select("#graph").select("svg")) {
136                d3.select("#graph").select("svg").remove();
137        }
138
139        // 逕ｻ髱｢繧ｵ繧､繧ｺ縺ｫ蜷医ｏ縺婀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        // 繝弱�繝峨∈縺ｮ繧ｪ繝ｳ繝槭え繧ｹ縺ｧ繝代せ謗｢邏｢縲√ヱ繧ｹ荳ｭ縺ｮ繝ｪ繝ｳ繧ｯ譁�ｭ励ｒ陦ｨ遉ｺ
196        node.on("mouseover", function(d){
197
198                // 繝槭え繧ｹ縺ｮ蜍輔″繧ｫ繧ｦ繝ｳ繝医ｒ繝ｪ繧ｻ繝�ヨ
199                MOUSEMOVED = 0;
200
201                // 陦ｨ遉ｺ縺吶ｋ繝代せ菫晏ｭ倡畑驟榊�
202                var path = [];
203                // 繝��繝ｫ繝√ャ繝励∈縺ｮ蜷榊燕陦ｨ遉ｺ逕ｨ驟榊�
204                var pathname = [];
205
206                // 繝ｫ繝ｼ繝医ヮ繝ｼ繝我ｻ･螟悶↑繧�
207                if(d.nodeid != 0){
208                        // 縺ｾ縺壹が繝ｳ繝槭え繧ｹ縺輔ｌ縺溘ヮ繝ｼ繝峨�id縺ｨ蜷榊燕繧偵◎繧後◇繧瑚ｿｽ蜉
209                        path.push(d.nodeid);
210                        pathname.push(d.name);
211
212                        // 繝代せ謗｢邏｢
213                        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                                        }
224                                }
225                        // 繝ｫ繝ｼ繝医ヮ繝ｼ繝峨↓霎ｿ繧顔捩縺上∪縺ｧ郢ｰ繧願ｿ斐☆
226                        }while(path[(path.length-1)] != 0);
227
228                        // 譛ｫ遶ｯ繝弱�繝峨〒縺ｪ縺�↑繧�
229                        if(d.path == "notend"){
230                                // 繝��繝ｫ繝√ャ繝励ｒ髱櫁｡ｨ遉ｺ縺ｫ
231                                document.getElementById("showpath").style.display = "none";
232                        }else{
233                                // 譛ｫ遶ｯ繝弱�繝峨↑繧峨ヤ繝ｼ繝ｫ繝√ャ繝励�諠�ｱ繧呈峩譁ｰ
234                                var resultText = "<h3>Selected Path</h3>";
235                                // 繝代せ縺ｮ蜷榊燕驟榊�蛻�ｾ後ｍ縺九ｉ郢ｰ繧願ｿ斐＠縺ｪ縺後ｉ
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                                        }
244                                }
245                                // 繝��繝ｫ繝√ャ繝励�蜀�ｮｹ繧呈嶌縺肴鋤縺�
246                                document.getElementById("selectpath").innerHTML=(resultText);
247
248                                // 繧ｵ繝ｼ繝悶Ξ繝�ヨ縺ｫ騾√ｊ霑斐☆繝代せ繧ｪ繝悶ず繧ｧ繧ｯ繝医ｒ菫晏ｭ�
249                                pathobj = d.path;
250
251                                // 繝��繝ｫ繝√ャ繝苓｡ｨ遉ｺ譎ゅ�蠎ｧ讓呻ｼ医が繝ｳ繝槭え繧ｹ縺輔ｌ縺溘ヮ繝ｼ繝峨�讓ｪ縺ｫ繝懊ち繝ｳ縺梧擂繧九ｈ縺��鄂ｮ��
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                                // 繝��繝ｫ繝√ャ繝励′逕ｻ髱｢螟悶↓蜃ｺ縺ｪ縺�ｈ縺�｣懈ｭ｣
256                                if(xPosition < 0){
257                                        xPosition = 0;
258                                }
259                                if(yPosition < 0){
260                                        yPosition = 0;
261                                }
262
263                                // 逕滓�縺励◆蠎ｧ讓吶↓繝��繝ｫ繝√ャ繝励ｒ陦ｨ遉ｺ
264                                document.getElementById("showpath").style.left = xPosition + "px"
265                                document.getElementById("showpath").style.top = yPosition + "px"
266                                document.getElementById("showpath").style.display = "block";
267                        }
268                // 繝ｫ繝ｼ繝医ヮ繝ｼ繝峨□縺｣縺溘↑繧�
269                }else{
270                        // 繝��繝ｫ繝√ャ繝励ｒ髱櫁｡ｨ遉ｺ
271                        document.getElementById("showpath").style.display = "none";
272                }
273
274                // 繧ｪ繝ｳ繝槭え繧ｹ縺輔ｌ縺溘ヮ繝ｼ繝峨�鬮倥＆縺ｫ隕ｪ繧貞粋繧上○繧�
275                // 蜷医ｏ縺帙ｋ鬮倥＆繧剃ｿ晏ｭ�
276                var movey = d.y;
277
278                // 蜷�ヮ繝ｼ繝峨↓蟇ｾ縺�
279                node
280                        // 霈ｪ驛ｭ邱壹�濶ｲ繧定ｨｭ螳�
281                        .style("stroke", function(d){
282                                // 縺ｾ縺壹�閭梧勹濶ｲ�医ョ繝輔か繝ｫ繝茨ｼ峨ｒ謖�ｮ�
283                                var strokecolor = "#fafafa";
284                                // 蜑榊屓濶ｲ繧剃ｻ倥￠縺ｦ縺�◆繝弱�繝峨↑繧�
285                                if(d.view == "now"){
286                                        // 繝弱�繝峨�濶ｲ莉倥￠繧偵↑縺励↓
287                                        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"){
344                                        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";
360                        }
361                        return strokecolor;
362                });
363
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);
559}
560
561// 繝��繧ｿ縺ｮ菴懈�繝｡繧ｽ繝�ラ
562function make_data(tdepth, ret, parent, depth){
563        // ret縺梧悴螳夂ｾｩ縺ｪ繧峨�螳夂ｾｩ縺励※莉｣蜈･
564        if (ret == undefined){
565                ret = new Object();
566                ret['nodes'] = new Array();
567                ret['links'] = new Array();
568        }
569
570        PATHNUM = 0;
571        MAXDEPTH = 0;
572        TREESPACE = 0;
573        DRAWHEIGHT = NODEHEIGHT;
574
575        var obj = JSON.parse(jsontext);
576        // obj繝医ャ繝鈴嚴螻､縺ｮ謨ｰ縺縺醍ｹｰ繧願ｿ斐＠縺ｪ縺後ｉ
577        //for(var i = 0; i < obj['paths'].length; i++){
578        for(var i = 0; i < 10; i++){
579                if(i == 0){
580                        // 蛻晏屓縺縺代Ν繝ｼ繝医ヮ繝ｼ繝峨ｒ繝励ャ繧ｷ繝･
581                        ret['nodes'].push({'name': obj['paths'][0]['startClassLabel'], 'group': 0, 'x':50, 'y':50, 'nodeid':ret['nodes'].length, 'view' : 'no', 'path': 'notend'});
582                }
583                // 蜈医↓source縺ｫ0�医Ν繝ｼ繝茨ｼ峨ｒ莉｣蜈･
584                var source = 0;
585                // 蜈ｱ騾壹Ν繝ｼ繝亥愛螳壹ｒtrue縺ｫ
586                var isCommon = true;
587
588                // classLinks縺ｮ謨ｰ縺縺醍ｹｰ繧願ｿ斐＠縺ｪ縺後ｉ
589                for(var j = 0;j < obj['paths'][i]['classLinks'].length; j++){
590
591                        // 繝ｪ繝ｳ繧ｯ縺ｮ蜷榊燕繧旦RL譛ｫ蟆ｾ縺九ｉ蜿門ｾ�
592                        var propertytext = obj['paths'][i]['classLinks'][j]['propertyURI'];
593                        var propertysplit1 = propertytext.split("/");
594                        var propertysplit2 = propertysplit1[propertysplit1.length - 1];
595                        var propertysplit3 = propertysplit2.split("#");
596                        propertytext = propertysplit3[propertysplit3.length - 1];
597
598                        if(MAXDEPTH < j+1){
599                                MAXDEPTH = j+1;
600                        }
601                        // 縺薙％縺ｾ縺ｧ蜈ｱ騾壹Ν繝ｼ繝医↑繧�
602                        if(isCommon){
603                                // 莉雁屓繧ょ�騾壹°遒ｺ隱阪☆繧九◆繧√�繝輔Λ繧ｰ
604                                var isCommonNow = false;
605                                // nodes驟榊�縺ｫ蜷後§linkedClass縺梧里縺ｫ縺ゅｋ縺狗｢ｺ隱�
606                                var targets = [];
607                                for(var k = 0; k < ret['nodes'].length; k++){
608                                        // 蜷碁嚴螻､縺九▽蜷後§蜷榊燕縺ｮ繧ゅ�縺後≠縺｣縺溘ｉtargets驟榊�縺ｫ逡ｪ蜿ｷ繧定ｿｽ蜉
609                                        if(ret['nodes'][k]['group'] == (j+1) && obj['paths'][i]['classLinks'][j]['linkedClassURI'] == ret['nodes'][k]['name']){
610                                                targets.push(k);
611                                        }
612                                }
613
614                                // 譌｢縺ｫ縺ゅ▲縺溷ｴ蜷医�links驟榊�縺ｫ蜷後§link縺悟ｭ伜惠縺吶ｋ縺狗｢ｺ隱�
615                                if(targets.length != 0){
616                                        // 蜈医⊇縺ｩ隕九▽縺代◆targets縺ｮ謨ｰ縺縺醍ｹｰ繧願ｿ斐＠縺ｪ縺後ｉ
617                                        for(var l = 0; l <targets.length; l++){
618                                                // links驟榊�縺ｫ蜈ｨ縺丞酔縺俶擅莉ｶ縺ｮ繧ゅ�縺後≠繧九°遒ｺ隱�
619                                                for(var m = 0; m < ret['links'].length; m++){
620                                                        // 縺ゅ▲縺溷ｴ蜷井ｻ雁屓縺ｮ繧ゅ�縺ｯ霑ｽ蜉縺帙★source繧呈峩譁ｰ縺励※谺｡縺ｸ
621                                                        if(ret['links'][m]['source'] == source && ret['links'][m]['target'] == targets[l] && ret['links'][m]['property'] == obj['paths'][i]['classLinks'][j]['propertyURI'] && !isCommonNow){
622                                                                // 蜈ｱ騾壹Ν繝ｼ繝医ヵ繝ｩ繧ｰ繧偵が繝ｳ
623                                                                isCommonNow = true;
624                                                                source = targets[l];
625                                                        }
626                                                }
627                                        }
628
629                                        // 蜷дarget繧堤｢ｺ隱阪＠縺ｦ蜈ｱ騾壹Ν繝ｼ繝医〒縺ｯ縺ｪ縺九▲縺溷ｴ蜷域眠隕剰ｿｽ蜉
630                                        if(!isCommonNow){
631                                                isCommon = false;
632                                                ret['nodes'].push({'name': obj['paths'][i]['classLinks'][j]['nodeLabel'], 'group': (j+1), 'x':0, 'y':0, 'dy':0, 'nodeid':ret['nodes'].length, 'view' : 'no', 'path': 'notend'});
633                                                ret['links'].push({'source':source, 'target':ret['nodes'].length - 1, 'value':5, 'property': propertytext, 'view' : 'no'});
634                                                source = ret['nodes'].length - 1;
635                                        }
636
637                                // 縺ｪ縺九▲縺溷ｴ蜷医�蛻･譚｡莉ｶ縺ｪ縺ｮ縺ｧ譁ｰ隕剰ｿｽ蜉縺励※谺｡縺ｸ
638                                }else{
639
640                                        isCommon = false;
641                                        ret['nodes'].push({'name': obj['paths'][i]['classLinks'][j]['nodeLabel'], 'group': (j+1), 'x':0, 'y':0, 'dy':0, 'nodeid':ret['nodes'].length, 'view' : 'no', 'path': 'notend'});
642                                        ret['links'].push({'source':source, 'target':ret['nodes'].length - 1, 'value':5, 'property': propertytext, 'view' : 'no'});
643                                        source = ret['nodes'].length - 1;
644                                }
645                        // 譌｢縺ｫ蜈ｱ騾壹Ν繝ｼ繝医〒縺ｪ縺�↑繧画眠隕剰ｿｽ蜉縺励※谺｡縺ｸ
646                        }else{
647                                ret['nodes'].push({'name': obj['paths'][i]['classLinks'][j]['nodeLabel'], 'group': (j+1), 'x':0, 'y':0, 'dy':0, 'nodeid':ret['nodes'].length, 'view' : 'no', 'path': 'notend'});
648                                ret['links'].push({'source':source, 'target':ret['nodes'].length - 1, 'value':5, 'property': propertytext, 'view' : 'no'});
649                                source = ret['nodes'].length - 1;
650                        }
651
652                }
653                ret['nodes'][ret['nodes'].length - 1]['path'] = obj['paths'][i];
654                PATHNUM++;
655        }
656        TREESPACE = (window.innerWidth - 200) / (MAXDEPTH + 1);
657
658        // 縺ｧ縺阪◆邨先棡繧定ｿ斐☆
659        return ret;
660}
661
662// 逕滓�縺輔ｌ縺溘ョ繝ｼ繧ｿ縺ｮ螳滄圀縺ｮ繝ｭ繧ｱ繝ｼ繧ｷ繝ｧ繝ｳ繧定ｨ育ｮ励☆繧九Γ繧ｽ繝�ラ�亥�蝗槭�myNodeIndex縺�縲］odes縺ｫ逕滓�縺輔ｌ縺殤odes驟榊�縲〕inks縺ｫ逕滓�縺輔ｌ縺殕inks驟榊�縺梧ｸ｡縺輔ｌ繧具ｼ�
663function set_map_location(myNodeIndex, nodes, links, depth, fromAngle, toAngle){
664
665        // depth縺梧悴螳夂ｾｩ縺ｪ繧峨�0繧偵そ繝�ヨ
666        if (depth == undefined){
667                depth = 0;
668        }
669/*
670        // fromAngle縺梧悴螳夂ｾｩ縺ｪ繧峨�0繧偵そ繝�ヨ
671        if (fromAngle == undefined){
672                fromAngle = 0;
673        }
674        // toAngle縺梧悴螳夂ｾｩ縺ｪ繧峨�1繧偵そ繝�ヨ
675        if (toAngle == undefined){
676                toAngle = 1;
677        }
678*/
679
680        // 蜷�ｨｮ蛻晄悄蛹�
681        var children = undefined;
682        var parent = undefined;
683        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        */
689
690        // links驟榊�縺ｮ謨ｰ縺縺醍ｹｰ繧願ｿ斐＠縺ｪ縺後ｉ
691        for (var i=0; i<links.length; i++){
692                // 縺昴�links縺ｮtarget縺稽yNodeIndex縺ｪ繧英arent繧偵そ繝�ヨ
693                if (links[i].target == myNodeIndex){
694                        parent = links[i].source;
695                }
696        }
697
698        // parent縺瑚ｦ九▽縺九▲縺ｦ縺�◆縺ｪ繧峨�
699        if (parent != undefined){
700                // parent縺ｨlinks繧呈ｸ｡縺揚et_children繝｡繧ｽ繝�ラ繧貞ｮ溯｡�
701                parentsChildren = get_children(parent, links);
702        }
703
704        if(myNodeIndex != 0){
705                DRAWHEIGHT += (NODEHEIGHT * 1.5);
706                var x = (depth * TREESPACE) + (TREESPACE / 3);
707                var y = DRAWHEIGHT;
708                nodes[myNodeIndex].x = x;
709                nodes[myNodeIndex].y = y;
710        }else{
711                var x = TREESPACE / 2;
712                var y = (NODEHEIGHT * 1.5) * ((PATHNUM - 1) / 2) + NODEHEIGHT;
713                nodes[myNodeIndex].x = x;
714                nodes[myNodeIndex].y = y;
715        }
716
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
726        children = get_children(myNodeIndex, links);
727
728        for (var i=0; i<children.length; i++){
729                if(i == 0){
730                        DRAWHEIGHT -= (NODEHEIGHT * 1.5);
731                }
732                var child = children[i];
733                set_map_location(child, nodes, links, depth+1, fromAngle + ((toAngle - fromAngle) / children.length) * i, fromAngle + ((toAngle - fromAngle) / children.length) * (i+1));
734        }
735
736}
737
738// 謖�ｮ壹＆繧後◆隕ｪ縺梧戟縺､蟄舌ｒ霑斐☆
739function get_children(index, links){
740        var children = new Array();
741        // links縺ｮ謨ｰ縺縺醍｢ｺ隱阪＠縺ｪ縺後ｉ
742        for (var i=0; i<links.length; i++){
743                // 隕ｪ縺梧ｸ｡縺輔ｌ縺溯ｦｪ縺ｨ荳€閾ｴ縺吶ｋ譎ゅ�蟄舌ｒ霑ｽ蜉
744                if (links[i].source == index){
745                        children.push(links[i].target);
746                }
747        }
748        return children;
749}
750
751// ZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZN
752// ZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZN
753
754function setEndpoints(ep){
755        for (var i = 0; i < ep.length; i++){
756                $("*[name=selectendpoint]").append('<option value="' + ep[i] + '">' + ep[i]);
757        }
758}
759
760function setEndpoint(){
761
762        var sel = $("*[name=selectendpoint]").val();
763
764        if(sel == "input"){
765                sel = $("*[name=inputendpoint]").val();
766        }
767
768        document.getElementById("showpath").style.display = "none";
769
770        $.ajax({
771                type: "GET",
772                url : getClassListURL,
773                data: {
774                    ep: sel
775  },
776                dataType: 'json',
777                success : function(epclass) {
778                        $("*[name=startclass] option").remove();
779                        $("*[name=endclass] option").remove();
780                        for (var i = 0; i < epclass.length; i++){
781                                $("*[name=startclass]").append('<option value="' + epclass[i] + '">' + epclass[i]);
782                                $("*[name=endclass]").append('<option value="' + epclass[i] + '">' + epclass[i]);
783                        }
784                },
785                error : function(XMLHttpRequest, textStatus, errorThrown) {
786                        alert("繝ｪ繧ｯ繧ｨ繧ｹ繝域凾縺ｫ縺ｪ繧薙ｉ縺九�繧ｨ繝ｩ繝ｼ縺檎匱逕溘＠縺ｾ縺励◆�� + textStatus +":\n" + errorThrown);
787                }
788        });
789        document.getElementById("seclass").style.display = "block";
790}
791
792function setSEClass(){
793
794        var sel = $("*[name=selectendpoint]").val();
795
796        if(sel == "input"){
797                sel = $("*[name=inputendpoint]").val();
798        }
799
800        MAXDEPTH = 0;
801
802        document.getElementById("selectpath").innerHTML = "";
803        document.getElementById("showpath").style.display = "none";
804
805        var selstart = $("*[name=startclass]").val();
806        var selend = $("*[name=endclass]").val();
807
808        $.ajax({
809                type: "GET",
810                url : getPathListURL,
811                data: {
812                    ep: sel,
813                    startclass: selstart,
814                    endclass: selend
815  },
816                dataType: 'text',
817                success : function(nodes) {
818                        jsontext = nodes;
819                        console.log(nodes);
820                        view_map();
821                },
822                error : function(XMLHttpRequest, textStatus, errorThrown) {
823                        alert("繝ｪ繧ｯ繧ｨ繧ｹ繝域凾縺ｫ縺ｪ繧薙ｉ縺九�繧ｨ繝ｩ繝ｼ縺檎匱逕溘＠縺ｾ縺励◆�� + textStatus +":\n" + errorThrown);
824                }
825        });
826}
827
828function getSPARQL(){
829
830        var selectpath = JSON.stringify(pathobj);
831
832        //document.getElementById("selectpath").innerHTML=(resultText);
833
834        $.ajax({
835                type: "GET",
836                url : getSPARQLURL,
837                data: {
838                    jsonpath: selectpath
839  },
840                dataType: 'text',
841                success : function(sparql) {
842                        document.path.sparql.value = sparql;
843                        document.getElementById("showpath").style.display = "none";
844                        window.scrollTo(0, 0);
845                },
846                error : function(XMLHttpRequest, textStatus, errorThrown) {
847                        alert("繝ｪ繧ｯ繧ｨ繧ｹ繝域凾縺ｫ縺ｪ繧薙ｉ縺九�繧ｨ繝ｩ繝ｼ縺檎匱逕溘＠縺ｾ縺励◆�� + textStatus +":\n" + errorThrown);
848                }
849        });
850}
851
852function sendSPARQL(){
853        var ep = $("*[name=selectendpoint]").val();
854
855        if(ep == "input"){
856                ep = $("*[name=inputendpoint]").val();
857        }
858
859        var query = $("*[name=sparql]").val();
860
861        query = encodeURIComponent(query);
862
863        openpage = ep + "?format=text%2Fhtml&query=" + query;
864
865        window.open(openpage);
866}
867
868// ZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZN
869// ZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZN
870
871-->
872
873</script>
874</head>
875<body>
876
877<div id="menu" style="position: absolute; overflow:hidden; top:0px; left:0px; width: 1000px; background-color: #eeeeee;">
878
879        <div id="setting" style="margin: 15px; float: left;">
880                <div id="endpoint">
881                        <form name="endpoint">
882                                <input type="text" style="width: 200px;" name="inputendpoint"><br>
883                                <select size=1 name="selectendpoint" style="width: 200px;">
884                                        <option value="input">Textbox
885                                </select><br>
886                                <input type="button" name="setendpoint" value="SetEndPoint" onClick="setEndpoint()">
887                        </form>
888                </div>
889                <div id="seclass" style="margin-top: 30px;">
890                        <form name="seclass">
891                                StartClass<br>
892                                <select size=1 name="startclass" style="width: 200px;">
893                                </select><br>
894                                EndClass<br>
895                                <select size=1 name="endclass" style="width: 200px;">
896                                </select><br>
897                                <input type="button" name="setclass" value="SetClass" onClick="setSEClass()">
898                        </form>
899                </div>
900        </div>
901
902        <div id="editing" style="margin: 15px 25px; float: right;">
903                <form name="path">
904                        <textarea name="sparql" style="width: 300px; height: 180px;"></textarea><br>
905                        <input type="button" name="sendsparql" value="Send SPARQL" onClick="sendSPARQL()"><br>
906                </form>
907        </div>
908</div>
909<div id="graph" style="position: absolute; top:0px; left:0px;">
910</div>
911<div id="showpath" style="display: none;">
912        <div id="selectpath" style="word-wrap: break-word;">
913        </div>
914        <input type="button" id="getsparqlbutton" name="getsparql" value="Get SPARQL" onClick="getSPARQL()">
915</div>
916</body>
917</html>
Note: リポジトリブラウザについてのヘルプは TracBrowser を参照してください。