root/SPARQLBuilderWWW/web/jsgui.html @ 135

リビジョン 129, 26.2 KB (コミッタ: lenz, 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 = "gs.php";
59
60// 縺ｧ縺阪≠縺後▲縺欖PARQL繧帝€∽ｿ｡縺吶ｋURL�域悴螳溯｣�ｼ�
61
62// SETURLSETURLSETURLSETURLSETURLSETURLSETURLSETURLSETURLSETURLSETURLSETURL
63// SETURLSETURLSETURLSETURLSETURLSETURLSETURLSETURLSETURLSETURLSETURLSETURL
64
65
66var pathname = [];
67var PATHNUM = 0;
68var MAXDEPTH = 0;
69var TREESPACE = 0;
70var DRAWHEIGHT = 0;
71var NODEHEIGHT = 50;
72var MOUSEMOVED = 0;
73var jsontext = "";
74var DURATION = 0;
75
76
77// 髢九＞縺溘ｉ蜷�ｨｮ繧､繝ｳ繧ｿ繝ｼ繝輔ぉ繝ｼ繧ｹ驛ｨ蜩√�繧ｵ繧､繧ｺ繧貞､画峩縲√お繝ｳ繝峨�繧､繝ｳ繝井ｸ€隕ｧ繧貞叙蠕励＠繧ｻ繝�ヨ
78$(window).load(function() {
79
80        var menuwidth = window.innerWidth + "px";
81        var inputswidth = ((window.innerWidth - 100) / 2) + "px";
82        document.getElementById("menu").style.width = menuwidth;
83        document.endpoint.inputendpoint.style.width = inputswidth;
84        document.endpoint.selectendpoint.style.width = inputswidth;
85        document.seclass.startclass.style.width = inputswidth;
86        document.seclass.endclass.style.width = inputswidth;
87        document.path.sparql.style.width = inputswidth;
88        document.path.sendsparql.style.width = inputswidth;
89        document.getElementById("graph").style.top = document.getElementById("menu").offsetHeight + "px";
90
91        $.ajax({
92                type: "GET",
93                url : getEndPointsURL,
94                dataType: 'json',
95                success : function(data) {
96                        setEndpoints(data);
97                },
98                error : function(XMLHttpRequest, textStatus, errorThrown) {
99                        alert("繝ｪ繧ｯ繧ｨ繧ｹ繝域凾縺ｫ縺ｪ繧薙ｉ縺九�繧ｨ繝ｩ繝ｼ縺檎匱逕溘＠縺ｾ縺励◆�� + textStatus +":\n" + errorThrown);
100                }
101        });
102
103});
104
105// 謠冗判蜃ｦ逅�
106function view_map(){
107
108        // make_data繝｡繧ｽ繝�ラ縺ｮ邨先棡繧貞叙蠕�
109        var json = make_data(0);
110        // 豺ｱ縺輔ｒ蜿門ｾ�
111        var dep = MAXDEPTH;
112
113        // 蜃ｺ譚･荳翫′縺｣縺溽ｵ先棡繧呈ｸ｡縺励※繝槭ャ繝嶺ｸ翫�繝ｭ繧ｱ繝ｼ繧ｷ繝ｧ繝ｳ繧偵そ繝�ヨ
114        set_map_location(0, json['nodes'], json['links']);
115
116        // SVG縺ｮ蟷�→鬮倥＆繧定ｨｭ螳夲ｼ亥ｹ�ｼ夂判髱｢縺�▲縺ｱ縺�€€鬮倥＆�壹ヱ繧ｹ縺ｮ謨ｰ縺ｫ蠢懊§險ｭ螳夲ｼ�
117        var width = window.innerWidth;
118        var height = ((NODEHEIGHT * 1.5) * PATHNUM) + (NODEHEIGHT / 2);
119
120        // 繧ｫ繝ｩ繝ｼ繧貞叙蠕�
121        var color = d3.scale.category20();
122
123        // SVG縺悟ｭ伜惠縺吶ｋ縺ｪ繧峨�蜑企勁
124        if (d3.select("#graph").select("svg")) {
125                d3.select("#graph").select("svg").remove();
126        }
127        DURATION = 0;
128
129        /*
130        // 繝峨Λ繝�げ譎ゅ�蜃ｦ逅�
131        var drag = d3.behavior.drag().on("drag", function(d,i) {
132            d.x += d3.event.dx
133            d.y += d3.event.dy
134
135            d. isDrag = true;
136            DURATION = 0;
137            redraw();
138        });
139        */
140
141        // SVG縺ｮ霑ｽ蜉
142        var svg = d3.select("#graph").append("svg")
143            .attr("width", width)
144            .attr("height", height);
145
146        // 閭梧勹縺ｮ霑ｽ蜉
147        var bg = svg
148                .append("rect")
149                .attr("x", 0)
150                .attr("y", 0)
151                .attr("width", width)
152                .attr("height", height)
153                .attr("fill", "#fafafa");
154
155        // 繝ｪ繝ｳ繧ｯ縺ｮ菴懈�
156        var link = svg.selectAll(".link")
157        .data(json.links)
158        .enter().append("line")
159        .attr("class", "link")
160        .style("stroke-width", function(d) { return Math.sqrt(d.value);});
161
162        // 繝弱�繝峨�菴懈�
163        var node = svg.selectAll(".node")
164        .data(json.nodes)
165        .enter().append("circle")
166        .attr("class", "node")
167        .attr("r", (NODEHEIGHT / 2))
168        .attr("cx", function(d) { return d.x;} )
169        .attr("cy",  function(d) { return d.y; })
170        .style("stroke", function(d) { return '#fafafa'; })
171        .style("stroke-width", function(d) { return '1.5px'; })
172        .style("fill", function(d) { return color(d.group); })
173        .style("cursor", function(d) { return 'pointer'; });
174        //.call(drag);
175
176        // 繝弱�繝峨ユ繧ｭ繧ｹ繝医�菴懈�
177        var tnode = svg.selectAll("text.node")
178        .data(json.nodes)
179        .enter().append("svg:text")
180        .attr("class", "tnode")
181        .attr("x", function(d) { return d.x; })
182        .attr("y", function(d) { return d.y; })
183        .text(function(d) { return d.name; })
184        .style("fill", function(d) { return '#000000'; })
185        .style("stroke", function(d) { return '#000000'; })
186        .style("stroke-width", function(d) { return '1.5px'; })
187        .style("text-anchor", function(d) { return 'middle'; })
188        .style("pointer-events", "none");
189        //.call(drag);
190
191        // 繝ｪ繝ｳ繧ｯ繝�く繧ｹ繝医�菴懈�
192        var tlink = svg.selectAll("text.link")
193        .data(json.links)
194        .enter().append("svg:text")
195        .attr("class", "tlink")
196        .attr("x", function(d) { return (json.nodes[d.source].x + json.nodes[d.target].x) / 2; })
197        .attr("y", function(d) { return (json.nodes[d.source].y + json.nodes[d.target].y) / 2; })
198        .style("fill", function(d) { return '#000000'; })
199        .style("text-anchor", function(d) { return 'middle'; });
200
201        // 繝弱�繝峨∈縺ｮ繧ｯ繝ｪ繝�け縺ｧ繝代せ謗｢邏｢縲√ヱ繧ｹ荳ｭ縺ｮ繝ｪ繝ｳ繧ｯ譁�ｭ励ｒ陦ｨ遉ｺ
202        node.on("mouseover", function(d){
203
204                MOUSEMOVED = 0;
205
206                if(!d.isDrag){
207
208                        var path = [];
209                        pathname = [];
210
211                        if(d.nodeid != 0){
212                                path.push(d.nodeid);
213                                pathname.push(d.name);
214                                do{
215                                        for(var i = 0; i < link.data().length; i++){
216                                                if(path[(path.length-1)] == link.data()[i].target){
217                                                        path.push(link.data()[i].source);
218                                                        pathname.push(link.data()[i].property);
219                                                        pathname.push(node.data()[link.data()[i].source].name);
220                                                }
221                                        }
222                                }while(path[(path.length-1)] != 0);
223                                var resultText = "<h3>Selected Path</h3>";
224                                for (var i = pathname.length;i > 0; i--){
225                                        if(i % 2 == 1){
226                                                resultText = resultText + "<span style=\"font-weight: bold;\">" + pathname[i - 1] + "</span><br><br>";
227                                        }else{
228                                                resultText = resultText + pathname[i - 1] + "<br><br>";
229                                        }
230                                }
231
232                                document.getElementById("selectpath").innerHTML=(resultText);
233
234                                if(d.group > (MAXDEPTH - 2)){
235                                        document.getElementById("getsparqlbutton").style.display = "block";
236                                }else{
237                                        document.getElementById("getsparqlbutton").style.display = "none";
238                                }
239
240                                var xPosition = parseFloat(d3.select(this).attr("cx")) + parseFloat(d3.select(this).style("stroke-width")) + (NODEHEIGHT * 0.5);
241                                var yPosition = parseFloat(d3.select(this).attr("cy") - document.getElementById("showpath").offsetHeight + document.getElementById("menu").offsetHeight) + (NODEHEIGHT * 0.5);
242
243                                if(xPosition < 0){
244                                        xPosition = 0;
245                                }
246                                if(yPosition < 0){
247                                        yPosition = 0;
248                                }
249
250                                document.getElementById("showpath").style.left = xPosition + "px"
251                                document.getElementById("showpath").style.top = yPosition + "px"
252                                //document.getElementById("showpath").style.display = "block";
253
254                        }else{
255                                document.getElementById("showpath").style.display = "none";
256                        }
257
258                        var movey = d.y;
259
260                        node
261                        .style("stroke", function(d){
262                                var strokecolor = "#fafafa";
263                                if(d.view == "now"){
264                                        d.view = "no";
265                                }
266                                if(d.view == "moved"){
267                                        d.view = "clicked";
268                                }
269
270                                if(d.view == "no"){
271                                        for(var n = 0; n < path.length; n++){
272                                                if(path[n] == d.nodeid){
273                                                        strokecolor = "#ffaaaa";
274                                                        d.view = "now";
275                                                }
276                                        }
277                                }else if(d.view == "clicked"){
278                                        strokecolor = "#ffaaaa";
279                                        for(var n = 0; n < path.length; n++){
280                                                if(path[n] == d.nodeid){
281                                                        d.view = "moved";
282                                                }
283                                        }
284                                }
285
286                                return strokecolor;
287                        })
288                        .attr("cy", function(d){
289                                if(d.view == "now" || d.view == "moved"){
290                                        var curty = d.y;
291                                        d.y = movey;
292                                        return curty;
293                                }else{
294                                        return d.y;
295                                }
296                        });
297
298                        tlink
299                        .text(function(d) {
300                                var linktext = "";
301                                if(d.view == "now"){
302                                        d.view = "no";
303                                }
304
305                                if(d.view == "no"){
306                                        for(var t = 0; t < path.length; t++){
307                                                if(path[t] == d.target && node.data()[d.target].view != "hide"){
308                                                        var propertytext = d.property
309                                                        var linksplit1 = propertytext.split("/");
310                                                        var linksplit2 = linksplit1[linksplit1.length - 1];
311                                                        var linksplit3 = linksplit2.split("#");
312                                                        linktext = linksplit3[linksplit3.length - 1];
313                                                        d.view = "now";
314                                                }
315                                        }
316                                }else if(d.view == "fix" && node.data()[d.target].view != "hide"){
317                                        var propertytext = d.property
318                                        var linksplit1 = propertytext.split("/");
319                                        var linksplit2 = linksplit1[linksplit1.length - 1];
320                                        var linksplit3 = linksplit2.split("#");
321                                        linktext = linksplit3[linksplit3.length - 1];
322                                }
323                                return linktext;
324                        });
325
326                        link
327                        .style("stroke", function(d){
328                                if(d.view == "no"){
329                                        return "#999";
330                                }else{
331                                        return "#ffaaaa";
332                                }
333                        });
334
335                        redraw();
336                }
337
338        }).on("click", function(d){
339
340                node
341                .style("stroke", function(d) {
342                        var strokecolor = "#fafafa"
343                        if(d.view == "now" || d.view == "clicked" || d.view == "moved"){
344                                strokecolor = "#ffaaaa"
345                                d.view = "clicked";
346                        }
347                        return strokecolor;
348                });
349
350                //d.hideparent = d.nodeid;
351
352                var childs = [];
353                var prevchilds = [];
354                prevchilds.push(d.nodeid);
355
356                do{
357                        var tmpchilds = [];
358                        var curchilds = [];
359                        for(var p = 0; p < prevchilds.length; p++){
360                                tmpchilds = get_children(prevchilds[p], json['links']);
361                                curchilds = curchilds.concat(tmpchilds);
362                        }
363                        prevchilds = curchilds;
364                        childs = childs.concat(curchilds);
365
366                }while(curchilds.length != 0);
367
368                var childy = d.y;
369                for(var c = 0; c < childs.length; c++){
370                        if(node.data()[childs[c]].y < childy){
371                                childy = node.data()[childs[c]].y;
372                        }
373                }
374
375                d.y = childy;
376
377                var maxdy = 0;
378                var mindy = 0;
379
380                for(var c = 0; c < childs.length; c++){
381                        if(node.data()[childs[c]].view != "hide"){
382                                var dy = node.data()[childs[c]].y - d.y;
383                                if(dy > maxdy){
384                                        maxdy = dy;
385                                }
386                                node.data()[childs[c]].x = d.x;
387                                node.data()[childs[c]].y = d.y;
388                                node.data()[childs[c]].dy = dy;
389                                node.data()[childs[c]].view = "hide";
390                                node.data()[childs[c]].hideparent = d.nodeid;
391                        }else{
392                                if(node.data()[childs[c]].hideparent == d.nodeid){
393                                        node.data()[childs[c]].x = d.x + (TREESPACE * (node.data()[childs[c]].group - d.group));
394                                        node.data()[childs[c]].y = node.data()[childs[c]].y + node.data()[childs[c]].dy;
395                                        if(-node.data()[childs[c]].dy < mindy){
396                                                mindy = -node.data()[childs[c]].dy;
397                                        }
398                                        node.data()[childs[c]].view = "appear";
399                                        node.data()[childs[c]].hideparent = -1;
400                                }
401                        }
402                }
403
404                node
405                .attr("r", function(d){
406                        if(d.view == "appear"){
407                                d.view = "no";
408                        }else if(d.y > childy){
409                                d.y = d.y - maxdy - mindy;
410                        }
411                        if(d.view == "hide"){
412                                d.x = node.data()[d.hideparent].x;
413                                d.y = node.data()[d.hideparent].y;
414                        }
415                        if(d.nodeid == 0){
416                                d.y = childy;
417                        }
418                        return (NODEHEIGHT / 2);
419                });
420
421                tlink
422                .text(function(d) {
423                        var linktext = "";
424                        if((d.view == "now" || d.view == "fix") && (node.data()[d.target].view != "hide")){
425                                var propertytext = d.property
426                                var linksplit1 = propertytext.split("/");
427                                var linksplit2 = linksplit1[linksplit1.length - 1];
428                                var linksplit3 = linksplit2.split("#");
429                                linktext = linksplit3[linksplit3.length - 1];
430                                d.view = "fix";
431                        }
432                        return linktext;
433                });
434
435
436                redraw();
437
438        }).on("mouseout", function(d){
439                d.isDrag = false;
440        });
441
442        var redraw = function (){
443                link
444                .transition()
445                .duration(DURATION)
446                .attr("x1", function(d) {return node.data()[d.source].x;})
447                .attr("y1", function(d) {return node.data()[d.source].y;})
448                .attr("x2", function(d) {return node.data()[d.target].x;})
449                .attr("y2", function(d) {return node.data()[d.target].y;});
450
451                tlink
452                .transition()
453                .duration(DURATION)
454                .attr("x", function(d) {return (node.data()[d.source].x + node.data()[d.target].x) / 2;})
455                .attr("y", function(d) {return ((node.data()[d.source].y + node.data()[d.target].y) / 2) + 5;});
456
457                node
458                .transition()
459                .duration(DURATION)
460                .attr("cx", function(d) {return d.x;})
461                .attr("cy", function(d) {return d.y;})
462                .style("opacity", function(d){
463                        var opa = 1.0;
464                        if(d.view == "hide"){
465                                opa = 0.0;
466                        }
467                        return opa;
468                })
469                .style("fill", function(d) {
470                        var fcolor = color(d.group);
471
472                        for(var n = 0; n < node.data().length; n++){
473                                if(d.nodeid == node.data()[n].hideparent){
474                                        fcolor = "ffaaaa";
475                                }
476                        }
477                        return fcolor;
478                })
479                .style("pointer-events", function(d){
480                        var pe = "auto";
481                        if(d.view == "hide"){
482                                pe = "none";
483                        }
484                        return pe;
485                });
486
487                tnode
488                .transition()
489                .duration(DURATION)
490                .attr("x", function(d) {return d.x;})
491                .attr("y", function(d) {
492                        var updown = (NODEHEIGHT * 0.4);
493                        if(d.group % 2 == 1){
494                                updown = -(NODEHEIGHT * 0.2);
495                        }
496                        if(d.view == "now" || d.view == "moved"){
497                                //updown = 5;
498                        }
499                        return d.y + updown;
500                })
501                .text(function(d){
502                        var nt = d.name;
503                        if(d.view == "hide"){
504                                nt = "";
505                        }
506                        return nt;
507                });
508
509                DURATION = 500;
510
511        };
512
513        bg.on("click", function() {
514                document.getElementById("showpath").style.display = "none";
515                d3.selectAll(".node").style("stroke-width", function(d) { return '1.5px'; });
516                d3.selectAll(".node").style("stroke", function(d) { return '#ffffff'; });
517
518                node
519                .style("stroke", function(d){
520                        if(d.view != "hide"){
521                                d.view = "no";
522                        }
523                        return "#fafafa";
524                });
525
526                tlink
527                .text(function(d) {
528                        d.view = "no";
529                        return "";
530                });
531
532                link
533                .style("stroke", function(d){
534                        return "#999";
535                });
536
537        });
538
539        bg.on("mousemove", function(){
540                MOUSEMOVED++;
541                if(MOUSEMOVED > 30){
542                        document.getElementById("showpath").style.display = "none";
543                        MOUSEMOVED = 0;
544                }
545        });
546
547        redraw();
548}
549
550// 繝��繧ｿ縺ｮ菴懈�繝｡繧ｽ繝�ラ
551function make_data(tdepth, ret, parent, depth){
552        // ret縺梧悴螳夂ｾｩ縺ｪ繧峨�螳夂ｾｩ縺励※莉｣蜈･
553        if (ret == undefined){
554                ret = new Object();
555                ret['nodes'] = new Array();
556                ret['links'] = new Array();
557        }
558
559        PATHNUM = 0;
560        MAXDEPTH = 0;
561        TREESPACE = 0;
562        DRAWHEIGHT = NODEHEIGHT;
563
564        var obj = JSON.parse(jsontext);
565        // obj繝医ャ繝鈴嚴螻､縺ｮ謨ｰ縺縺醍ｹｰ繧願ｿ斐＠縺ｪ縺後ｉ
566        for(var i = 0; i < obj['paths'].length; i++){
567                if(i == 0){
568                        // 蛻晏屓縺縺代Ν繝ｼ繝医ヮ繝ｼ繝峨ｒ繝励ャ繧ｷ繝･
569                        ret['nodes'].push({'name':obj['paths'][0]['startClassURI'], 'group': 0, 'x':50, 'y':50, 'nodeid':ret['nodes'].length, 'view' : 'no'});
570                }
571                // 蜈医↓source縺ｫ0�医Ν繝ｼ繝茨ｼ峨ｒ莉｣蜈･
572                var source = 0;
573                // 蜈ｱ騾壹Ν繝ｼ繝亥愛螳壹ｒtrue縺ｫ
574                var isCommon = true;
575
576                // classLinks縺ｮ謨ｰ縺縺醍ｹｰ繧願ｿ斐＠縺ｪ縺後ｉ
577                for(var j = 0;j < obj['paths'][i]['classLinks'].length; j++){
578
579                        if(MAXDEPTH < j+1){
580                                MAXDEPTH = j+1;
581                        }
582                        // 縺薙％縺ｾ縺ｧ蜈ｱ騾壹Ν繝ｼ繝医↑繧�
583                        if(isCommon){
584                                // 莉雁屓繧ょ�騾壹°遒ｺ隱阪☆繧九◆繧√�繝輔Λ繧ｰ
585                                var isCommonNow = false;
586                                // nodes驟榊�縺ｫ蜷後§linkedClass縺梧里縺ｫ縺ゅｋ縺狗｢ｺ隱�
587                                var targets = [];
588                                for(var k = 0; k < ret['nodes'].length; k++){
589                                        // 蜷碁嚴螻､縺九▽蜷後§蜷榊燕縺ｮ繧ゅ�縺後≠縺｣縺溘ｉtargets驟榊�縺ｫ逡ｪ蜿ｷ繧定ｿｽ蜉
590                                        if(ret['nodes'][k]['group'] == (j+1) && obj['paths'][i]['classLinks'][j]['linkedClassURI'] == ret['nodes'][k]['name']){
591                                                targets.push(k);
592                                        }
593                                }
594
595                                // 譌｢縺ｫ縺ゅ▲縺溷ｴ蜷医�links驟榊�縺ｫ蜷後§link縺悟ｭ伜惠縺吶ｋ縺狗｢ｺ隱�
596                                if(targets.length != 0){
597                                        // 蜈医⊇縺ｩ隕九▽縺代◆targets縺ｮ謨ｰ縺縺醍ｹｰ繧願ｿ斐＠縺ｪ縺後ｉ
598                                        for(var l = 0; l <targets.length; l++){
599                                                // links驟榊�縺ｫ蜈ｨ縺丞酔縺俶擅莉ｶ縺ｮ繧ゅ�縺後≠繧九°遒ｺ隱�
600                                                for(var m = 0; m < ret['links'].length; m++){
601                                                        // 縺ゅ▲縺溷ｴ蜷井ｻ雁屓縺ｮ繧ゅ�縺ｯ霑ｽ蜉縺帙★source繧呈峩譁ｰ縺励※谺｡縺ｸ
602                                                        if(ret['links'][m]['source'] == source && ret['links'][m]['target'] == targets[l] && ret['links'][m]['property'] == obj['paths'][i]['classLinks'][j]['propertyURI'] && !isCommonNow){
603                                                                // 蜈ｱ騾壹Ν繝ｼ繝医ヵ繝ｩ繧ｰ繧偵が繝ｳ
604                                                                isCommonNow = true;
605                                                                source = targets[l];
606                                                        }
607                                                }
608                                        }
609
610                                        // 蜷дarget繧堤｢ｺ隱阪＠縺ｦ蜈ｱ騾壹Ν繝ｼ繝医〒縺ｯ縺ｪ縺九▲縺溷ｴ蜷域眠隕剰ｿｽ蜉
611                                        if(!isCommonNow){
612                                                isCommon = false;
613                                                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'});
614                                                ret['links'].push({'source':source, 'target':ret['nodes'].length - 1, 'value':5, 'property':obj['paths'][i]['classLinks'][j]['propertyURI'], 'view' : 'no'});
615                                                source = ret['nodes'].length - 1;
616                                        }
617
618                                // 縺ｪ縺九▲縺溷ｴ蜷医�蛻･譚｡莉ｶ縺ｪ縺ｮ縺ｧ譁ｰ隕剰ｿｽ蜉縺励※谺｡縺ｸ
619                                }else{
620
621                                        isCommon = false;
622                                        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'});
623                                        ret['links'].push({'source':source, 'target':ret['nodes'].length - 1, 'value':5, 'property':obj['paths'][i]['classLinks'][j]['propertyURI'], 'view' : 'no'});
624                                        source = ret['nodes'].length - 1;
625                                }
626                        // 譌｢縺ｫ蜈ｱ騾壹Ν繝ｼ繝医〒縺ｪ縺�↑繧画眠隕剰ｿｽ蜉縺励※谺｡縺ｸ
627                        }else{
628                                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'});
629                                ret['links'].push({'source':source, 'target':ret['nodes'].length - 1, 'value':5, 'property':obj['paths'][i]['classLinks'][j]['propertyURI'], 'view' : 'no'});
630                                source = ret['nodes'].length - 1;
631                        }
632
633                }
634                PATHNUM++;
635        }
636        TREESPACE = (window.innerWidth - 200) / (MAXDEPTH + 1);
637
638        // 縺ｧ縺阪◆邨先棡繧定ｿ斐☆
639        return ret;
640}
641
642// 逕滓�縺輔ｌ縺溘ョ繝ｼ繧ｿ縺ｮ螳滄圀縺ｮ繝ｭ繧ｱ繝ｼ繧ｷ繝ｧ繝ｳ繧定ｨ育ｮ励☆繧九Γ繧ｽ繝�ラ�亥�蝗槭�myNodeIndex縺�縲］odes縺ｫ逕滓�縺輔ｌ縺殤odes驟榊�縲〕inks縺ｫ逕滓�縺輔ｌ縺殕inks驟榊�縺梧ｸ｡縺輔ｌ繧具ｼ�
643function set_map_location(myNodeIndex, nodes, links, depth, fromAngle, toAngle){
644
645        // depth縺梧悴螳夂ｾｩ縺ｪ繧峨�0繧偵そ繝�ヨ
646        if (depth == undefined){
647                depth = 0;
648        }
649/*
650        // fromAngle縺梧悴螳夂ｾｩ縺ｪ繧峨�0繧偵そ繝�ヨ
651        if (fromAngle == undefined){
652                fromAngle = 0;
653        }
654        // toAngle縺梧悴螳夂ｾｩ縺ｪ繧峨�1繧偵そ繝�ヨ
655        if (toAngle == undefined){
656                toAngle = 1;
657        }
658*/
659
660        // 蜷�ｨｮ蛻晄悄蛹�
661        var children = undefined;
662        var parent = undefined;
663        var parentsChildren = undefined;
664
665        /*
666        ret['nodes'].push({'name':'aaaa', 'group': depth, 'x':(WIDTH/2), 'y':(HEIGHT/2)});
667        ret['links'].push({'source':parent, 'target':newIndex, 'value':5});
668        */
669
670        // links驟榊�縺ｮ謨ｰ縺縺醍ｹｰ繧願ｿ斐＠縺ｪ縺後ｉ
671        for (var i=0; i<links.length; i++){
672                // 縺昴�links縺ｮtarget縺稽yNodeIndex縺ｪ繧英arent繧偵そ繝�ヨ
673                if (links[i].target == myNodeIndex){
674                        parent = links[i].source;
675                }
676        }
677
678        // parent縺瑚ｦ九▽縺九▲縺ｦ縺�◆縺ｪ繧峨�
679        if (parent != undefined){
680                // parent縺ｨlinks繧呈ｸ｡縺揚et_children繝｡繧ｽ繝�ラ繧貞ｮ溯｡�
681                parentsChildren = get_children(parent, links);
682        }
683
684        if(myNodeIndex != 0){
685                DRAWHEIGHT += (NODEHEIGHT * 1.5);
686                var x = (depth * TREESPACE) + (TREESPACE / 3);
687                var y = DRAWHEIGHT;
688                nodes[myNodeIndex].x = x;
689                nodes[myNodeIndex].y = y;
690        }else{
691                var x = TREESPACE / 2;
692                var y = (NODEHEIGHT * 1.5) * ((PATHNUM - 1) / 2) + NODEHEIGHT;
693                nodes[myNodeIndex].x = x;
694                nodes[myNodeIndex].y = y;
695        }
696
697        /*
698        var x = (WIDTH/2) + depth * (WIDTH / (MAXDEPTH * 2 + 1)) * Math.sin(2 * 3.14 * ((toAngle + fromAngle) / 2));
699        var y = (HEIGHT/2) + depth * (HEIGHT / (MAXDEPTH * 2 + 1)) * Math.cos(2 * 3.14 * ((toAngle + fromAngle) / 2));
700        nodes[myNodeIndex].x = x;
701        nodes[myNodeIndex].y = y;
702
703        CIRCLE_SIZE = (WIDTH / (MAXDEPTH * 2 + 1));
704        */
705
706        children = get_children(myNodeIndex, links);
707
708        for (var i=0; i<children.length; i++){
709                if(i == 0){
710                        DRAWHEIGHT -= (NODEHEIGHT * 1.5);
711                }
712                var child = children[i];
713                set_map_location(child, nodes, links, depth+1, fromAngle + ((toAngle - fromAngle) / children.length) * i, fromAngle + ((toAngle - fromAngle) / children.length) * (i+1));
714        }
715
716}
717
718// 謖�ｮ壹＆繧後◆隕ｪ縺梧戟縺､蟄舌ｒ霑斐☆
719function get_children(index, links){
720        var children = new Array();
721        // links縺ｮ謨ｰ縺縺醍｢ｺ隱阪＠縺ｪ縺後ｉ
722        for (var i=0; i<links.length; i++){
723                // 隕ｪ縺梧ｸ｡縺輔ｌ縺溯ｦｪ縺ｨ荳€閾ｴ縺吶ｋ譎ゅ�蟄舌ｒ霑ｽ蜉
724                if (links[i].source == index){
725                        children.push(links[i].target);
726                }
727        }
728        return children;
729}
730
731// ZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZN
732// ZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZN
733
734function setEndpoints(ep){
735        for (var i = 0; i < ep.length; i++){
736                $("*[name=selectendpoint]").append('<option value="' + ep[i] + '">' + ep[i]);
737        }
738}
739
740function setEndpoint(){
741
742        var sel = $("*[name=selectendpoint]").val();
743
744        if(sel == "input"){
745                sel = $("*[name=inputendpoint]").val();
746        }
747
748        document.getElementById("showpath").style.display = "none";
749
750        $.ajax({
751                type: "GET",
752                url : getClassListURL,
753                data: {
754                    ep: sel
755  },
756                dataType: 'json',
757                success : function(epclass) {
758                        $("*[name=startclass] option").remove();
759                        $("*[name=endclass] option").remove();
760                        for (var i = 0; i < epclass.length; i++){
761                                $("*[name=startclass]").append('<option value="' + epclass[i] + '">' + epclass[i]);
762                                $("*[name=endclass]").append('<option value="' + epclass[i] + '">' + epclass[i]);
763                        }
764                },
765                error : function(XMLHttpRequest, textStatus, errorThrown) {
766                        alert("繝ｪ繧ｯ繧ｨ繧ｹ繝域凾縺ｫ縺ｪ繧薙ｉ縺九�繧ｨ繝ｩ繝ｼ縺檎匱逕溘＠縺ｾ縺励◆�� + textStatus +":\n" + errorThrown);
767                }
768        });
769        document.getElementById("seclass").style.display = "block";
770}
771
772function setSEClass(){
773
774        var sel = $("*[name=selectendpoint]").val();
775
776        if(sel == "input"){
777                sel = $("*[name=inputendpoint]").val();
778        }
779
780        MAXDEPTH = 0;
781
782        document.getElementById("selectpath").innerHTML = "";
783        document.getElementById("showpath").style.display = "none";
784
785        var selstart = $("*[name=startclass]").val();
786        var selend = $("*[name=endclass]").val();
787
788        $.ajax({
789                type: "GET",
790                url : getPathListURL,
791                data: {
792                    ep: sel,
793                    startclass: selstart,
794                    endclass: selend
795  },
796                dataType: 'text',
797                success : function(nodes) {
798                        jsontext = nodes;
799                        view_map();
800                },
801                error : function(XMLHttpRequest, textStatus, errorThrown) {
802                        alert("繝ｪ繧ｯ繧ｨ繧ｹ繝域凾縺ｫ縺ｪ繧薙ｉ縺九�繧ｨ繝ｩ繝ｼ縺檎匱逕溘＠縺ｾ縺励◆�� + textStatus +":\n" + errorThrown);
803                }
804        });
805}
806
807function getSPARQL(){
808
809        var selectpath = JSON.stringify(pathname);
810        //document.getElementById("selectpath").innerHTML=(resultText);
811
812        $.ajax({
813                type: "GET",
814                url : getSPARQLURL,
815                data: {
816                    jsonpath: selectpath
817  },
818                dataType: 'text',
819                success : function(sparql) {
820                        document.path.sparql.value = sparql;
821                        document.getElementById("showpath").style.display = "none";
822                        window.scrollTo(0, 0);
823                },
824                error : function(XMLHttpRequest, textStatus, errorThrown) {
825                        alert("繝ｪ繧ｯ繧ｨ繧ｹ繝域凾縺ｫ縺ｪ繧薙ｉ縺九�繧ｨ繝ｩ繝ｼ縺檎匱逕溘＠縺ｾ縺励◆�� + textStatus +":\n" + errorThrown);
826                }
827        });
828}
829
830function sendSPARQL(){
831        var ep = $("*[name=selectendpoint]").val();
832
833        if(ep == "input"){
834                ep = $("*[name=inputendpoint]").val();
835        }
836
837        var query = $("*[name=sparql]").val();
838
839        query = encodeURI(query);
840
841        openpage = ep + "?format=text%2Fhtml&query=" + query;
842
843        window.open(openpage);
844}
845
846// ZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZN
847// ZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZN
848
849-->
850
851</script>
852</head>
853<body>
854
855<div id="menu" style="position: absolute; overflow:hidden; top:0px; left:0px; width: 1000px; background-color: #eeeeee;">
856
857        <div id="setting" style="margin: 15px; float: left;">
858                <div id="endpoint">
859                        <form name="endpoint">
860                                <input type="text" style="width: 200px;" name="inputendpoint"><br>
861                                <select size=1 name="selectendpoint" style="width: 200px;">
862                                        <option value="input">Textbox
863                                </select><br>
864                                <input type="button" name="setendpoint" value="SetEndPoint" onClick="setEndpoint()">
865                        </form>
866                </div>
867                <div id="seclass" style="margin-top: 30px;">
868                        <form name="seclass">
869                                StartClass<br>
870                                <select size=1 name="startclass" style="width: 200px;">
871                                </select><br>
872                                EndClass<br>
873                                <select size=1 name="endclass" style="width: 200px;">
874                                </select><br>
875                                <input type="button" name="setclass" value="SetClass" onClick="setSEClass()">
876                        </form>
877                </div>
878        </div>
879
880        <div id="editing" style="margin: 15px 25px; float: right;">
881                <form name="path">
882                        <textarea name="sparql" style="width: 300px; height: 180px;"></textarea><br>
883                        <input type="button" name="sendsparql" value="Send SPARQL" onClick="sendSPARQL()"><br>
884                </form>
885        </div>
886</div>
887<div id="graph" style="position: absolute; top:0px; left:0px;">
888</div>
889<div id="showpath" style="display: none;">
890        <div id="selectpath" style="word-wrap: break-word;">
891        </div>
892        <input type="button" id="getsparqlbutton" name="getsparql" value="Get SPARQL" onClick="getSPARQL()">
893</div>
894</body>
895</html>
Note: リポジトリブラウザについてのヘルプは TracBrowser を参照してください。