root/SPARQLBuilderWWW/web/gui.html @ 233

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

ノードに表示される名前が短縮されないバグの改修

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