root/SPARQLBuilderWWW/web/jsgui.html @ 165

リビジョン 156, 27.0 KB (コミッタ: lenz, 10 年 前)

サーブレットへパスのオブジェクトを返す形に変更

末端ノード以外ではツールチップが出ない形に変更
行番号 
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
66var pathobj = [];
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) {
184                var nodetext = d.name
185                var nodesplit1 = nodetext.split("/");
186                var nodesplit2 = nodesplit1[nodesplit1.length - 1];
187                var nodesplit3 = nodesplit2.split("#");
188                nodetext = nodesplit3[nodesplit3.length - 1];
189                return nodetext;
190        })
191        .style("fill", function(d) { return '#000000'; })
192        //.style("stroke", function(d) { return '#000000'; })
193        //.style("stroke-width", function(d) { return '1.5px'; })
194        .style("text-anchor", function(d) { return 'middle'; })
195        .style("pointer-events", "none");
196        //.call(drag);
197
198        // 繝ｪ繝ｳ繧ｯ繝�く繧ｹ繝医�菴懈�
199        var tlink = svg.selectAll("text.link")
200        .data(json.links)
201        .enter().append("svg:text")
202        .attr("class", "tlink")
203        .attr("x", function(d) { return (json.nodes[d.source].x + json.nodes[d.target].x) / 2; })
204        .attr("y", function(d) { return (json.nodes[d.source].y + json.nodes[d.target].y) / 2; })
205        .style("fill", function(d) { return '#000000'; })
206        .style("text-anchor", function(d) { return 'middle'; });
207
208        // 繝弱�繝峨∈縺ｮ繧ｯ繝ｪ繝�け縺ｧ繝代せ謗｢邏｢縲√ヱ繧ｹ荳ｭ縺ｮ繝ｪ繝ｳ繧ｯ譁�ｭ励ｒ陦ｨ遉ｺ
209        node.on("mouseover", function(d){
210
211                MOUSEMOVED = 0;
212
213                if(!d.isDrag){
214
215                        var path = [];
216                        var pathname = [];
217
218                        if(d.nodeid != 0){
219                                path.push(d.nodeid);
220                                pathname.push(d.name);
221                                do{
222                                        for(var i = 0; i < link.data().length; i++){
223                                                if(path[(path.length-1)] == link.data()[i].target){
224                                                        path.push(link.data()[i].source);
225                                                        pathname.push(link.data()[i].property);
226                                                        pathname.push(node.data()[link.data()[i].source].name);
227                                                }
228                                        }
229                                }while(path[(path.length-1)] != 0);
230                                var resultText = "<h3>Selected Path</h3>";
231                                for (var i = pathname.length;i > 0; i--){
232                                        if(i % 2 == 1){
233                                                resultText = resultText + "<span style=\"font-weight: bold;\">" + pathname[i - 1] + "</span><br><br>";
234                                        }else{
235                                                resultText = resultText + pathname[i - 1] + "<br><br>";
236                                        }
237                                }
238
239                                document.getElementById("selectpath").innerHTML=(resultText);
240
241                                /*
242                                if(d.group > (MAXDEPTH - 2)){
243                                        document.getElementById("getsparqlbutton").style.display = "block";
244                                }else{
245                                        document.getElementById("getsparqlbutton").style.display = "none";
246                                }
247                                */
248
249                                if(d.path == "notend"){
250                                        document.getElementById("showpath").style.display = "none";
251                                }else{
252
253                                        pathobj = d.path;
254
255                                        var xPosition = parseFloat(d3.select(this).attr("cx")) + parseFloat(d3.select(this).style("stroke-width")) + (NODEHEIGHT * 0.5);
256                                        var yPosition = parseFloat(d3.select(this).attr("cy") - document.getElementById("showpath").offsetHeight + document.getElementById("menu").offsetHeight) + (NODEHEIGHT * 0.5);
257
258                                        if(xPosition < 0){
259                                                xPosition = 0;
260                                        }
261                                        if(yPosition < 0){
262                                                yPosition = 0;
263                                        }
264
265                                        document.getElementById("showpath").style.left = xPosition + "px"
266                                        document.getElementById("showpath").style.top = yPosition + "px"
267                                        document.getElementById("showpath").style.display = "block";
268                                }
269
270                        }else{
271                                document.getElementById("showpath").style.display = "none";
272                        }
273
274                        var movey = d.y;
275
276                        node
277                        .style("stroke", function(d){
278                                var strokecolor = "#fafafa";
279                                if(d.view == "now"){
280                                        d.view = "no";
281                                }
282                                if(d.view == "moved"){
283                                        d.view = "clicked";
284                                }
285
286                                if(d.view == "no"){
287                                        for(var n = 0; n < path.length; n++){
288                                                if(path[n] == d.nodeid){
289                                                        strokecolor = "#ffaaaa";
290                                                        d.view = "now";
291                                                }
292                                        }
293                                }else if(d.view == "clicked"){
294                                        strokecolor = "#ffaaaa";
295                                        for(var n = 0; n < path.length; n++){
296                                                if(path[n] == d.nodeid){
297                                                        d.view = "moved";
298                                                }
299                                        }
300                                }
301
302                                return strokecolor;
303                        })
304                        .attr("cy", function(d){
305                                if(d.view == "now" || d.view == "moved"){
306                                        var curty = d.y;
307                                        d.y = movey;
308                                        return curty;
309                                }else{
310                                        return d.y;
311                                }
312                        });
313
314                        tlink
315                        .text(function(d) {
316                                var linktext = "";
317                                if(d.view == "now"){
318                                        d.view = "no";
319                                }
320
321                                if(d.view == "no"){
322                                        for(var t = 0; t < path.length; t++){
323                                                if(path[t] == d.target && node.data()[d.target].view != "hide"){
324                                                        var propertytext = d.property
325                                                        var linksplit1 = propertytext.split("/");
326                                                        var linksplit2 = linksplit1[linksplit1.length - 1];
327                                                        var linksplit3 = linksplit2.split("#");
328                                                        linktext = linksplit3[linksplit3.length - 1];
329                                                        d.view = "now";
330                                                }
331                                        }
332                                }else if(d.view == "fix" && node.data()[d.target].view != "hide"){
333                                        var propertytext = d.property
334                                        var linksplit1 = propertytext.split("/");
335                                        var linksplit2 = linksplit1[linksplit1.length - 1];
336                                        var linksplit3 = linksplit2.split("#");
337                                        linktext = linksplit3[linksplit3.length - 1];
338                                }
339                                return linktext;
340                        });
341
342                        link
343                        .style("stroke", function(d){
344                                if(d.view == "no"){
345                                        return "#999";
346                                }else{
347                                        return "#ffaaaa";
348                                }
349                        });
350
351                        redraw();
352                }
353
354        }).on("click", function(d){
355
356                node
357                .style("stroke", function(d) {
358                        var strokecolor = "#fafafa"
359                        if(d.view == "now" || d.view == "clicked" || d.view == "moved"){
360                                strokecolor = "#ffaaaa"
361                                d.view = "clicked";
362                        }
363                        return strokecolor;
364                });
365
366                //d.hideparent = d.nodeid;
367
368                var childs = [];
369                var prevchilds = [];
370                prevchilds.push(d.nodeid);
371
372                do{
373                        var tmpchilds = [];
374                        var curchilds = [];
375                        for(var p = 0; p < prevchilds.length; p++){
376                                tmpchilds = get_children(prevchilds[p], json['links']);
377                                curchilds = curchilds.concat(tmpchilds);
378                        }
379                        prevchilds = curchilds;
380                        childs = childs.concat(curchilds);
381
382                }while(curchilds.length != 0);
383
384                var childy = d.y;
385                for(var c = 0; c < childs.length; c++){
386                        if(node.data()[childs[c]].y < childy){
387                                childy = node.data()[childs[c]].y;
388                        }
389                }
390
391                d.y = childy;
392
393                var maxdy = 0;
394                var mindy = 0;
395
396                for(var c = 0; c < childs.length; c++){
397                        if(node.data()[childs[c]].view != "hide"){
398                                var dy = node.data()[childs[c]].y - d.y;
399                                if(dy > maxdy){
400                                        maxdy = dy;
401                                }
402                                node.data()[childs[c]].x = d.x;
403                                node.data()[childs[c]].y = d.y;
404                                node.data()[childs[c]].dy = dy;
405                                node.data()[childs[c]].view = "hide";
406                                node.data()[childs[c]].hideparent = d.nodeid;
407                        }else{
408                                if(node.data()[childs[c]].hideparent == d.nodeid){
409                                        node.data()[childs[c]].x = d.x + (TREESPACE * (node.data()[childs[c]].group - d.group));
410                                        node.data()[childs[c]].y = node.data()[childs[c]].y + node.data()[childs[c]].dy;
411                                        if(-node.data()[childs[c]].dy < mindy){
412                                                mindy = -node.data()[childs[c]].dy;
413                                        }
414                                        node.data()[childs[c]].view = "appear";
415                                        node.data()[childs[c]].hideparent = -1;
416                                }
417                        }
418                }
419
420                node
421                .attr("r", function(d){
422                        if(d.view == "appear"){
423                                d.view = "no";
424                        }else if(d.y > childy){
425                                d.y = d.y - maxdy - mindy;
426                        }
427                        if(d.view == "hide"){
428                                d.x = node.data()[d.hideparent].x;
429                                d.y = node.data()[d.hideparent].y;
430                        }
431                        if(d.nodeid == 0){
432                                d.y = childy;
433                        }
434                        return (NODEHEIGHT / 2);
435                });
436
437                tlink
438                .text(function(d) {
439                        var linktext = "";
440                        if((d.view == "now" || d.view == "fix") && (node.data()[d.target].view != "hide")){
441                                var propertytext = d.property
442                                var linksplit1 = propertytext.split("/");
443                                var linksplit2 = linksplit1[linksplit1.length - 1];
444                                var linksplit3 = linksplit2.split("#");
445                                linktext = linksplit3[linksplit3.length - 1];
446                                d.view = "fix";
447                        }
448                        return linktext;
449                });
450
451
452                redraw();
453
454        }).on("mouseout", function(d){
455                d.isDrag = false;
456        });
457
458        var redraw = function (){
459                link
460                .transition()
461                .duration(DURATION)
462                .attr("x1", function(d) {return node.data()[d.source].x;})
463                .attr("y1", function(d) {return node.data()[d.source].y;})
464                .attr("x2", function(d) {return node.data()[d.target].x;})
465                .attr("y2", function(d) {return node.data()[d.target].y;});
466
467                tlink
468                .transition()
469                .duration(DURATION)
470                .attr("x", function(d) {return (node.data()[d.source].x + node.data()[d.target].x) / 2;})
471                .attr("y", function(d) {return ((node.data()[d.source].y + node.data()[d.target].y) / 2) + 5;});
472
473                node
474                .transition()
475                .duration(DURATION)
476                .attr("cx", function(d) {return d.x;})
477                .attr("cy", function(d) {return d.y;})
478                .style("opacity", function(d){
479                        var opa = 1.0;
480                        if(d.view == "hide"){
481                                opa = 0.0;
482                        }
483                        return opa;
484                })
485                .style("fill", function(d) {
486                        var fcolor = color(d.group);
487
488                        for(var n = 0; n < node.data().length; n++){
489                                if(d.nodeid == node.data()[n].hideparent){
490                                        fcolor = "ffaaaa";
491                                }
492                        }
493                        return fcolor;
494                })
495                .style("pointer-events", function(d){
496                        var pe = "auto";
497                        if(d.view == "hide"){
498                                pe = "none";
499                        }
500                        return pe;
501                });
502
503                tnode
504                .transition()
505                .duration(DURATION)
506                .attr("x", function(d) {return d.x;})
507                .attr("y", function(d) {
508                        var updown = (NODEHEIGHT * 0.4);
509                        if(d.group % 2 == 1){
510                                updown = -(NODEHEIGHT * 0.2);
511                        }
512                        if(d.view == "now" || d.view == "moved"){
513                                //updown = 5;
514                        }
515                        return d.y + updown;
516                })
517                .text(function(d){
518                        var nodetext = d.name
519                        var nodesplit1 = nodetext.split("/");
520                        var nodesplit2 = nodesplit1[nodesplit1.length - 1];
521                        var nodesplit3 = nodesplit2.split("#");
522                        nodetext = nodesplit3[nodesplit3.length - 1];
523                        if(d.view == "hide"){
524                                nodetext = "";
525                        }
526                        return nodetext;
527                });
528
529                DURATION = 500;
530
531        };
532
533        bg.on("click", function() {
534                document.getElementById("showpath").style.display = "none";
535                d3.selectAll(".node").style("stroke-width", function(d) { return '1.5px'; });
536                d3.selectAll(".node").style("stroke", function(d) { return '#ffffff'; });
537
538                node
539                .style("stroke", function(d){
540                        if(d.view != "hide"){
541                                d.view = "no";
542                        }
543                        return "#fafafa";
544                });
545
546                tlink
547                .text(function(d) {
548                        d.view = "no";
549                        return "";
550                });
551
552                link
553                .style("stroke", function(d){
554                        return "#999";
555                });
556
557        });
558
559        bg.on("mousemove", function(){
560                MOUSEMOVED++;
561                if(MOUSEMOVED > 30){
562                        document.getElementById("showpath").style.display = "none";
563                        MOUSEMOVED = 0;
564                }
565        });
566
567        redraw();
568}
569
570// 繝��繧ｿ縺ｮ菴懈�繝｡繧ｽ繝�ラ
571function make_data(tdepth, ret, parent, depth){
572        // ret縺梧悴螳夂ｾｩ縺ｪ繧峨�螳夂ｾｩ縺励※莉｣蜈･
573        if (ret == undefined){
574                ret = new Object();
575                ret['nodes'] = new Array();
576                ret['links'] = new Array();
577        }
578
579        PATHNUM = 0;
580        MAXDEPTH = 0;
581        TREESPACE = 0;
582        DRAWHEIGHT = NODEHEIGHT;
583
584        var obj = JSON.parse(jsontext);
585        // obj繝医ャ繝鈴嚴螻､縺ｮ謨ｰ縺縺醍ｹｰ繧願ｿ斐＠縺ｪ縺後ｉ
586        for(var i = 0; i < obj['paths'].length; i++){
587                if(i == 0){
588                        // 蛻晏屓縺縺代Ν繝ｼ繝医ヮ繝ｼ繝峨ｒ繝励ャ繧ｷ繝･
589                        ret['nodes'].push({'name':obj['paths'][0]['startClassURI'], 'group': 0, 'x':50, 'y':50, 'nodeid':ret['nodes'].length, 'view' : 'no', 'path': 'notend'});
590                }
591                // 蜈医↓source縺ｫ0�医Ν繝ｼ繝茨ｼ峨ｒ莉｣蜈･
592                var source = 0;
593                // 蜈ｱ騾壹Ν繝ｼ繝亥愛螳壹ｒtrue縺ｫ
594                var isCommon = true;
595
596                // classLinks縺ｮ謨ｰ縺縺醍ｹｰ繧願ｿ斐＠縺ｪ縺後ｉ
597                for(var j = 0;j < obj['paths'][i]['classLinks'].length; j++){
598
599                        if(MAXDEPTH < j+1){
600                                MAXDEPTH = j+1;
601                        }
602                        // 縺薙％縺ｾ縺ｧ蜈ｱ騾壹Ν繝ｼ繝医↑繧�
603                        if(isCommon){
604                                // 莉雁屓繧ょ�騾壹°遒ｺ隱阪☆繧九◆繧√�繝輔Λ繧ｰ
605                                var isCommonNow = false;
606                                // nodes驟榊�縺ｫ蜷後§linkedClass縺梧里縺ｫ縺ゅｋ縺狗｢ｺ隱�
607                                var targets = [];
608                                for(var k = 0; k < ret['nodes'].length; k++){
609                                        // 蜷碁嚴螻､縺九▽蜷後§蜷榊燕縺ｮ繧ゅ�縺後≠縺｣縺溘ｉtargets驟榊�縺ｫ逡ｪ蜿ｷ繧定ｿｽ蜉
610                                        if(ret['nodes'][k]['group'] == (j+1) && obj['paths'][i]['classLinks'][j]['linkedClassURI'] == ret['nodes'][k]['name']){
611                                                targets.push(k);
612                                        }
613                                }
614
615                                // 譌｢縺ｫ縺ゅ▲縺溷ｴ蜷医�links驟榊�縺ｫ蜷後§link縺悟ｭ伜惠縺吶ｋ縺狗｢ｺ隱�
616                                if(targets.length != 0){
617                                        // 蜈医⊇縺ｩ隕九▽縺代◆targets縺ｮ謨ｰ縺縺醍ｹｰ繧願ｿ斐＠縺ｪ縺後ｉ
618                                        for(var l = 0; l <targets.length; l++){
619                                                // links驟榊�縺ｫ蜈ｨ縺丞酔縺俶擅莉ｶ縺ｮ繧ゅ�縺後≠繧九°遒ｺ隱�
620                                                for(var m = 0; m < ret['links'].length; m++){
621                                                        // 縺ゅ▲縺溷ｴ蜷井ｻ雁屓縺ｮ繧ゅ�縺ｯ霑ｽ蜉縺帙★source繧呈峩譁ｰ縺励※谺｡縺ｸ
622                                                        if(ret['links'][m]['source'] == source && ret['links'][m]['target'] == targets[l] && ret['links'][m]['property'] == obj['paths'][i]['classLinks'][j]['propertyURI'] && !isCommonNow){
623                                                                // 蜈ｱ騾壹Ν繝ｼ繝医ヵ繝ｩ繧ｰ繧偵が繝ｳ
624                                                                isCommonNow = true;
625                                                                source = targets[l];
626                                                        }
627                                                }
628                                        }
629
630                                        // 蜷дarget繧堤｢ｺ隱阪＠縺ｦ蜈ｱ騾壹Ν繝ｼ繝医〒縺ｯ縺ｪ縺九▲縺溷ｴ蜷域眠隕剰ｿｽ蜉
631                                        if(!isCommonNow){
632                                                isCommon = false;
633                                                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', 'path': 'notend'});
634                                                ret['links'].push({'source':source, 'target':ret['nodes'].length - 1, 'value':5, 'property':obj['paths'][i]['classLinks'][j]['propertyURI'], 'view' : 'no'});
635                                                source = ret['nodes'].length - 1;
636                                        }
637
638                                // 縺ｪ縺九▲縺溷ｴ蜷医�蛻･譚｡莉ｶ縺ｪ縺ｮ縺ｧ譁ｰ隕剰ｿｽ蜉縺励※谺｡縺ｸ
639                                }else{
640
641                                        isCommon = false;
642                                        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', 'path': 'notend'});
643                                        ret['links'].push({'source':source, 'target':ret['nodes'].length - 1, 'value':5, 'property':obj['paths'][i]['classLinks'][j]['propertyURI'], 'view' : 'no'});
644                                        source = ret['nodes'].length - 1;
645                                }
646                        // 譌｢縺ｫ蜈ｱ騾壹Ν繝ｼ繝医〒縺ｪ縺�↑繧画眠隕剰ｿｽ蜉縺励※谺｡縺ｸ
647                        }else{
648                                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', 'path': 'notend'});
649                                ret['links'].push({'source':source, 'target':ret['nodes'].length - 1, 'value':5, 'property':obj['paths'][i]['classLinks'][j]['propertyURI'], 'view' : 'no'});
650                                source = ret['nodes'].length - 1;
651                        }
652
653                }
654                ret['nodes'][ret['nodes'].length - 1]['path'] = obj['paths'][i];
655                PATHNUM++;
656        }
657        TREESPACE = (window.innerWidth - 200) / (MAXDEPTH + 1);
658
659        // 縺ｧ縺阪◆邨先棡繧定ｿ斐☆
660        return ret;
661}
662
663// 逕滓�縺輔ｌ縺溘ョ繝ｼ繧ｿ縺ｮ螳滄圀縺ｮ繝ｭ繧ｱ繝ｼ繧ｷ繝ｧ繝ｳ繧定ｨ育ｮ励☆繧九Γ繧ｽ繝�ラ�亥�蝗槭�myNodeIndex縺�縲］odes縺ｫ逕滓�縺輔ｌ縺殤odes驟榊�縲〕inks縺ｫ逕滓�縺輔ｌ縺殕inks驟榊�縺梧ｸ｡縺輔ｌ繧具ｼ�
664function set_map_location(myNodeIndex, nodes, links, depth, fromAngle, toAngle){
665
666        // depth縺梧悴螳夂ｾｩ縺ｪ繧峨�0繧偵そ繝�ヨ
667        if (depth == undefined){
668                depth = 0;
669        }
670/*
671        // fromAngle縺梧悴螳夂ｾｩ縺ｪ繧峨�0繧偵そ繝�ヨ
672        if (fromAngle == undefined){
673                fromAngle = 0;
674        }
675        // toAngle縺梧悴螳夂ｾｩ縺ｪ繧峨�1繧偵そ繝�ヨ
676        if (toAngle == undefined){
677                toAngle = 1;
678        }
679*/
680
681        // 蜷�ｨｮ蛻晄悄蛹�
682        var children = undefined;
683        var parent = undefined;
684        var parentsChildren = undefined;
685
686        /*
687        ret['nodes'].push({'name':'aaaa', 'group': depth, 'x':(WIDTH/2), 'y':(HEIGHT/2)});
688        ret['links'].push({'source':parent, 'target':newIndex, 'value':5});
689        */
690
691        // links驟榊�縺ｮ謨ｰ縺縺醍ｹｰ繧願ｿ斐＠縺ｪ縺後ｉ
692        for (var i=0; i<links.length; i++){
693                // 縺昴�links縺ｮtarget縺稽yNodeIndex縺ｪ繧英arent繧偵そ繝�ヨ
694                if (links[i].target == myNodeIndex){
695                        parent = links[i].source;
696                }
697        }
698
699        // parent縺瑚ｦ九▽縺九▲縺ｦ縺�◆縺ｪ繧峨�
700        if (parent != undefined){
701                // parent縺ｨlinks繧呈ｸ｡縺揚et_children繝｡繧ｽ繝�ラ繧貞ｮ溯｡�
702                parentsChildren = get_children(parent, links);
703        }
704
705        if(myNodeIndex != 0){
706                DRAWHEIGHT += (NODEHEIGHT * 1.5);
707                var x = (depth * TREESPACE) + (TREESPACE / 3);
708                var y = DRAWHEIGHT;
709                nodes[myNodeIndex].x = x;
710                nodes[myNodeIndex].y = y;
711        }else{
712                var x = TREESPACE / 2;
713                var y = (NODEHEIGHT * 1.5) * ((PATHNUM - 1) / 2) + NODEHEIGHT;
714                nodes[myNodeIndex].x = x;
715                nodes[myNodeIndex].y = y;
716        }
717
718        /*
719        var x = (WIDTH/2) + depth * (WIDTH / (MAXDEPTH * 2 + 1)) * Math.sin(2 * 3.14 * ((toAngle + fromAngle) / 2));
720        var y = (HEIGHT/2) + depth * (HEIGHT / (MAXDEPTH * 2 + 1)) * Math.cos(2 * 3.14 * ((toAngle + fromAngle) / 2));
721        nodes[myNodeIndex].x = x;
722        nodes[myNodeIndex].y = y;
723
724        CIRCLE_SIZE = (WIDTH / (MAXDEPTH * 2 + 1));
725        */
726
727        children = get_children(myNodeIndex, links);
728
729        for (var i=0; i<children.length; i++){
730                if(i == 0){
731                        DRAWHEIGHT -= (NODEHEIGHT * 1.5);
732                }
733                var child = children[i];
734                set_map_location(child, nodes, links, depth+1, fromAngle + ((toAngle - fromAngle) / children.length) * i, fromAngle + ((toAngle - fromAngle) / children.length) * (i+1));
735        }
736
737}
738
739// 謖�ｮ壹＆繧後◆隕ｪ縺梧戟縺､蟄舌ｒ霑斐☆
740function get_children(index, links){
741        var children = new Array();
742        // links縺ｮ謨ｰ縺縺醍｢ｺ隱阪＠縺ｪ縺後ｉ
743        for (var i=0; i<links.length; i++){
744                // 隕ｪ縺梧ｸ｡縺輔ｌ縺溯ｦｪ縺ｨ荳€閾ｴ縺吶ｋ譎ゅ�蟄舌ｒ霑ｽ蜉
745                if (links[i].source == index){
746                        children.push(links[i].target);
747                }
748        }
749        return children;
750}
751
752// ZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZN
753// ZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZN
754
755function setEndpoints(ep){
756        for (var i = 0; i < ep.length; i++){
757                $("*[name=selectendpoint]").append('<option value="' + ep[i] + '">' + ep[i]);
758        }
759}
760
761function setEndpoint(){
762
763        var sel = $("*[name=selectendpoint]").val();
764
765        if(sel == "input"){
766                sel = $("*[name=inputendpoint]").val();
767        }
768
769        document.getElementById("showpath").style.display = "none";
770
771        $.ajax({
772                type: "GET",
773                url : getClassListURL,
774                data: {
775                    ep: sel
776  },
777                dataType: 'json',
778                success : function(epclass) {
779                        $("*[name=startclass] option").remove();
780                        $("*[name=endclass] option").remove();
781                        for (var i = 0; i < epclass.length; i++){
782                                $("*[name=startclass]").append('<option value="' + epclass[i] + '">' + epclass[i]);
783                                $("*[name=endclass]").append('<option value="' + epclass[i] + '">' + epclass[i]);
784                        }
785                },
786                error : function(XMLHttpRequest, textStatus, errorThrown) {
787                        alert("繝ｪ繧ｯ繧ｨ繧ｹ繝域凾縺ｫ縺ｪ繧薙ｉ縺九�繧ｨ繝ｩ繝ｼ縺檎匱逕溘＠縺ｾ縺励◆�� + textStatus +":\n" + errorThrown);
788                }
789        });
790        document.getElementById("seclass").style.display = "block";
791}
792
793function setSEClass(){
794
795        var sel = $("*[name=selectendpoint]").val();
796
797        if(sel == "input"){
798                sel = $("*[name=inputendpoint]").val();
799        }
800
801        MAXDEPTH = 0;
802
803        document.getElementById("selectpath").innerHTML = "";
804        document.getElementById("showpath").style.display = "none";
805
806        var selstart = $("*[name=startclass]").val();
807        var selend = $("*[name=endclass]").val();
808
809        $.ajax({
810                type: "GET",
811                url : getPathListURL,
812                data: {
813                    ep: sel,
814                    startclass: selstart,
815                    endclass: selend
816  },
817                dataType: 'text',
818                success : function(nodes) {
819                        jsontext = 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 = encodeURI(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 を参照してください。