root/BH13SPARQLBuilder/src/hozo/maptool/jsgui.html @ 154

リビジョン 122, 26.1 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="http://d3js.org/d3.v3.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 = "ep.php";
50
51// 繧ｨ繝ｳ繝峨�繧､繝ｳ繝医′驕ｸ謚槭＆繧後◆繧峨◎縺ｮURL繧弾p縺ｨ縺�≧蜷榊燕縺ｧ騾∽ｿ｡縲√け繝ｩ繧ｹ繝ｪ繧ｹ繝医ｒ騾壼ｸｸ縺ｮ驟榊�縺ｧ霑斐＆繧後ｋ縺薙→縺ｧ繧ｯ繝ｩ繧ｹ縺ｮ驕ｸ謚櫁い縺ｫ謖ｿ蜈･
52var getClassListURL = "cl.php";
53
54// 繧ｯ繝ｩ繧ｹ莠後▽縺碁∈謚槭＆繧後◆繧峨◎縺ｮ繧ｯ繝ｩ繧ｹ蜷阪ｒstartclass縲‘ndclass縺ｨ縺�≧蜷榊燕縺ｧ縺昴ｌ縺槭ｌ騾∽ｿ｡縲√◎縺ｮ莠後▽繧堤ｵ舌�繝代せ縺ｮ繝ｪ繧ｹ繝医ｒJSON蠖｢蠑上�繝�く繧ｹ繝医〒霑斐＆繧後ｋ縺薙→縺ｧ縺昴ｌ繧偵げ繝ｩ繝輔↓謠冗判
55var getPathListURL = "node.php";
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].split("#");
311                                                        linktext = linksplit2[linksplit2.length];
312                                                        d.view = "now";
313                                                }
314                                        }
315                                }else if(d.view == "fix" && node.data()[d.target].view != "hide"){
316                                        var propertytext = d.property
317                                        var linksplit1 = propertytext.split("/");
318                                        var linksplit2 = linksplit1[linksplit1.length].split("#");
319                                        linktext = linksplit2[linksplit2.length];
320                                }
321                                return linktext;
322                        });
323
324                        link
325                        .style("stroke", function(d){
326                                if(d.view == "no"){
327                                        return "#999";
328                                }else{
329                                        return "#ffaaaa";
330                                }
331                        });
332
333                        redraw();
334                }
335
336        }).on("click", function(d){
337
338                node
339                .style("stroke", function(d) {
340                        var strokecolor = "#fafafa"
341                        if(d.view == "now" || d.view == "clicked" || d.view == "moved"){
342                                strokecolor = "#ffaaaa"
343                                d.view = "clicked";
344                        }
345                        return strokecolor;
346                });
347
348                //d.hideparent = d.nodeid;
349
350                var childs = [];
351                var prevchilds = [];
352                prevchilds.push(d.nodeid);
353
354                do{
355                        var tmpchilds = [];
356                        var curchilds = [];
357                        for(var p = 0; p < prevchilds.length; p++){
358                                tmpchilds = get_children(prevchilds[p], json['links']);
359                                curchilds = curchilds.concat(tmpchilds);
360                        }
361                        prevchilds = curchilds;
362                        childs = childs.concat(curchilds);
363
364                }while(curchilds.length != 0);
365
366                var childy = d.y;
367                for(var c = 0; c < childs.length; c++){
368                        if(node.data()[childs[c]].y < childy){
369                                childy = node.data()[childs[c]].y;
370                        }
371                }
372
373                d.y = childy;
374
375                var maxdy = 0;
376                var mindy = 0;
377
378                for(var c = 0; c < childs.length; c++){
379                        if(node.data()[childs[c]].view != "hide"){
380                                var dy = node.data()[childs[c]].y - d.y;
381                                if(dy > maxdy){
382                                        maxdy = dy;
383                                }
384                                node.data()[childs[c]].x = d.x;
385                                node.data()[childs[c]].y = d.y;
386                                node.data()[childs[c]].dy = dy;
387                                node.data()[childs[c]].view = "hide";
388                                node.data()[childs[c]].hideparent = d.nodeid;
389                        }else{
390                                if(node.data()[childs[c]].hideparent == d.nodeid){
391                                        node.data()[childs[c]].x = d.x + (TREESPACE * (node.data()[childs[c]].group - d.group));
392                                        node.data()[childs[c]].y = node.data()[childs[c]].y + node.data()[childs[c]].dy;
393                                        if(-node.data()[childs[c]].dy < mindy){
394                                                mindy = -node.data()[childs[c]].dy;
395                                        }
396                                        node.data()[childs[c]].view = "appear";
397                                        node.data()[childs[c]].hideparent = -1;
398                                }
399                        }
400                }
401
402                node
403                .attr("r", function(d){
404                        if(d.view == "appear"){
405                                d.view = "no";
406                        }else if(d.y > childy){
407                                d.y = d.y - maxdy - mindy;
408                        }
409                        if(d.view == "hide"){
410                                d.x = node.data()[d.hideparent].x;
411                                d.y = node.data()[d.hideparent].y;
412                        }
413                        if(d.nodeid == 0){
414                                d.y = childy;
415                        }
416                        return (NODEHEIGHT / 2);
417                });
418
419                tlink
420                .text(function(d) {
421                        var linktext = "";
422                        if((d.view == "now" || d.view == "fix") && (node.data()[d.target].view != "hide")){
423                                var propertytext = d.property
424                                var linksplit1 = propertytext.split("/");
425                                var linksplit2 = linksplit1[linksplit1.length].split("#");
426                                linktext = linksplit2[linksplit2.length];
427                                d.view = "fix";
428                        }
429                        return linktext;
430                });
431
432
433                redraw();
434
435        }).on("mouseout", function(d){
436                d.isDrag = false;
437        });
438
439        var redraw = function (){
440                link
441                .transition()
442                .duration(DURATION)
443                .attr("x1", function(d) {return node.data()[d.source].x;})
444                .attr("y1", function(d) {return node.data()[d.source].y;})
445                .attr("x2", function(d) {return node.data()[d.target].x;})
446                .attr("y2", function(d) {return node.data()[d.target].y;});
447
448                tlink
449                .transition()
450                .duration(DURATION)
451                .attr("x", function(d) {return (node.data()[d.source].x + node.data()[d.target].x) / 2;})
452                .attr("y", function(d) {return ((node.data()[d.source].y + node.data()[d.target].y) / 2) + 5;});
453
454                node
455                .transition()
456                .duration(DURATION)
457                .attr("cx", function(d) {return d.x;})
458                .attr("cy", function(d) {return d.y;})
459                .style("opacity", function(d){
460                        var opa = 1.0;
461                        if(d.view == "hide"){
462                                opa = 0.0;
463                        }
464                        return opa;
465                })
466                .style("fill", function(d) {
467                        var fcolor = color(d.group);
468
469                        for(var n = 0; n < node.data().length; n++){
470                                if(d.nodeid == node.data()[n].hideparent){
471                                        fcolor = "ffaaaa";
472                                }
473                        }
474                        return fcolor;
475                })
476                .style("pointer-events", function(d){
477                        var pe = "auto";
478                        if(d.view == "hide"){
479                                pe = "none";
480                        }
481                        return pe;
482                });
483
484                tnode
485                .transition()
486                .duration(DURATION)
487                .attr("x", function(d) {return d.x;})
488                .attr("y", function(d) {
489                        var updown = (NODEHEIGHT * 0.4);
490                        if(d.group % 2 == 1){
491                                updown = -(NODEHEIGHT * 0.2);
492                        }
493                        if(d.view == "now" || d.view == "moved"){
494                                //updown = 5;
495                        }
496                        return d.y + updown;
497                })
498                .text(function(d){
499                        var nt = d.name;
500                        if(d.view == "hide"){
501                                nt = "";
502                        }
503                        return nt;
504                });
505
506                DURATION = 500;
507
508        };
509
510        bg.on("click", function() {
511                document.getElementById("showpath").style.display = "none";
512                d3.selectAll(".node").style("stroke-width", function(d) { return '1.5px'; });
513                d3.selectAll(".node").style("stroke", function(d) { return '#ffffff'; });
514
515                node
516                .style("stroke", function(d){
517                        if(d.view != "hide"){
518                                d.view = "no";
519                        }
520                        return "#fafafa";
521                });
522
523                tlink
524                .text(function(d) {
525                        d.view = "no";
526                        return "";
527                });
528
529                link
530                .style("stroke", function(d){
531                        return "#999";
532                });
533
534        });
535
536        bg.on("mousemove", function(){
537                MOUSEMOVED++;
538                if(MOUSEMOVED > 30){
539                        document.getElementById("showpath").style.display = "none";
540                        MOUSEMOVED = 0;
541                }
542        });
543
544        redraw();
545}
546
547// 繝��繧ｿ縺ｮ菴懈�繝｡繧ｽ繝�ラ
548function make_data(tdepth, ret, parent, depth){
549        // ret縺梧悴螳夂ｾｩ縺ｪ繧峨�螳夂ｾｩ縺励※莉｣蜈･
550        if (ret == undefined){
551                ret = new Object();
552                ret['nodes'] = new Array();
553                ret['links'] = new Array();
554        }
555
556        PATHNUM = 0;
557        MAXDEPTH = 0;
558        TREESPACE = 0;
559        DRAWHEIGHT = NODEHEIGHT;
560
561        var obj = JSON.parse(jsontext);
562        // obj繝医ャ繝鈴嚴螻､縺ｮ謨ｰ縺縺醍ｹｰ繧願ｿ斐＠縺ｪ縺後ｉ
563        for(var i = 0; i < obj['paths'].length; i++){
564                if(i == 0){
565                        // 蛻晏屓縺縺代Ν繝ｼ繝医ヮ繝ｼ繝峨ｒ繝励ャ繧ｷ繝･
566                        ret['nodes'].push({'name':obj['paths'][0]['startClassURI'], 'group': 0, 'x':50, 'y':50, 'nodeid':ret['nodes'].length, 'view' : 'no'});
567                }
568                // 蜈医↓source縺ｫ0�医Ν繝ｼ繝茨ｼ峨ｒ莉｣蜈･
569                var source = 0;
570                // 蜈ｱ騾壹Ν繝ｼ繝亥愛螳壹ｒtrue縺ｫ
571                var isCommon = true;
572
573                // classLinks縺ｮ謨ｰ縺縺醍ｹｰ繧願ｿ斐＠縺ｪ縺後ｉ
574                for(var j = 0;j < obj['paths'][i]['classLinks'].length; j++){
575
576                        if(MAXDEPTH < j+1){
577                                MAXDEPTH = j+1;
578                        }
579                        // 縺薙％縺ｾ縺ｧ蜈ｱ騾壹Ν繝ｼ繝医↑繧�
580                        if(isCommon){
581                                // 莉雁屓繧ょ�騾壹°遒ｺ隱阪☆繧九◆繧√�繝輔Λ繧ｰ
582                                var isCommonNow = false;
583                                // nodes驟榊�縺ｫ蜷後§linkedClass縺梧里縺ｫ縺ゅｋ縺狗｢ｺ隱�
584                                var targets = [];
585                                for(var k = 0; k < ret['nodes'].length; k++){
586                                        // 蜷碁嚴螻､縺九▽蜷後§蜷榊燕縺ｮ繧ゅ�縺後≠縺｣縺溘ｉtargets驟榊�縺ｫ逡ｪ蜿ｷ繧定ｿｽ蜉
587                                        if(ret['nodes'][k]['group'] == (j+1) && obj['paths'][i]['classLinks'][j]['linkedClassURI'] == ret['nodes'][k]['name']){
588                                                targets.push(k);
589                                        }
590                                }
591
592                                // 譌｢縺ｫ縺ゅ▲縺溷ｴ蜷医�links驟榊�縺ｫ蜷後§link縺悟ｭ伜惠縺吶ｋ縺狗｢ｺ隱�
593                                if(targets.length != 0){
594                                        // 蜈医⊇縺ｩ隕九▽縺代◆targets縺ｮ謨ｰ縺縺醍ｹｰ繧願ｿ斐＠縺ｪ縺後ｉ
595                                        for(var l = 0; l <targets.length; l++){
596                                                // links驟榊�縺ｫ蜈ｨ縺丞酔縺俶擅莉ｶ縺ｮ繧ゅ�縺後≠繧九°遒ｺ隱�
597                                                for(var m = 0; m < ret['links'].length; m++){
598                                                        // 縺ゅ▲縺溷ｴ蜷井ｻ雁屓縺ｮ繧ゅ�縺ｯ霑ｽ蜉縺帙★source繧呈峩譁ｰ縺励※谺｡縺ｸ
599                                                        if(ret['links'][m]['source'] == source && ret['links'][m]['target'] == targets[l] && ret['links'][m]['property'] == obj['paths'][i]['classLinks'][j]['propertyURI'] && !isCommonNow){
600                                                                // 蜈ｱ騾壹Ν繝ｼ繝医ヵ繝ｩ繧ｰ繧偵が繝ｳ
601                                                                isCommonNow = true;
602                                                                source = targets[l];
603                                                        }
604                                                }
605                                        }
606
607                                        // 蜷дarget繧堤｢ｺ隱阪＠縺ｦ蜈ｱ騾壹Ν繝ｼ繝医〒縺ｯ縺ｪ縺九▲縺溷ｴ蜷域眠隕剰ｿｽ蜉
608                                        if(!isCommonNow){
609                                                isCommon = false;
610                                                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'});
611                                                ret['links'].push({'source':source, 'target':ret['nodes'].length - 1, 'value':5, 'property':obj['paths'][i]['classLinks'][j]['propertyURI'], 'view' : 'no'});
612                                                source = ret['nodes'].length - 1;
613                                        }
614
615                                // 縺ｪ縺九▲縺溷ｴ蜷医�蛻･譚｡莉ｶ縺ｪ縺ｮ縺ｧ譁ｰ隕剰ｿｽ蜉縺励※谺｡縺ｸ
616                                }else{
617
618                                        isCommon = false;
619                                        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'});
620                                        ret['links'].push({'source':source, 'target':ret['nodes'].length - 1, 'value':5, 'property':obj['paths'][i]['classLinks'][j]['propertyURI'], 'view' : 'no'});
621                                        source = ret['nodes'].length - 1;
622                                }
623                        // 譌｢縺ｫ蜈ｱ騾壹Ν繝ｼ繝医〒縺ｪ縺�↑繧画眠隕剰ｿｽ蜉縺励※谺｡縺ｸ
624                        }else{
625                                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'});
626                                ret['links'].push({'source':source, 'target':ret['nodes'].length - 1, 'value':5, 'property':obj['paths'][i]['classLinks'][j]['propertyURI'], 'view' : 'no'});
627                                source = ret['nodes'].length - 1;
628                        }
629
630                }
631                PATHNUM++;
632        }
633        TREESPACE = (window.innerWidth - 200) / (MAXDEPTH + 1);
634
635        // 縺ｧ縺阪◆邨先棡繧定ｿ斐☆
636        return ret;
637}
638
639// 逕滓�縺輔ｌ縺溘ョ繝ｼ繧ｿ縺ｮ螳滄圀縺ｮ繝ｭ繧ｱ繝ｼ繧ｷ繝ｧ繝ｳ繧定ｨ育ｮ励☆繧九Γ繧ｽ繝�ラ�亥�蝗槭�myNodeIndex縺�縲］odes縺ｫ逕滓�縺輔ｌ縺殤odes驟榊�縲〕inks縺ｫ逕滓�縺輔ｌ縺殕inks驟榊�縺梧ｸ｡縺輔ｌ繧具ｼ�
640function set_map_location(myNodeIndex, nodes, links, depth, fromAngle, toAngle){
641
642        // depth縺梧悴螳夂ｾｩ縺ｪ繧峨�0繧偵そ繝�ヨ
643        if (depth == undefined){
644                depth = 0;
645        }
646/*
647        // fromAngle縺梧悴螳夂ｾｩ縺ｪ繧峨�0繧偵そ繝�ヨ
648        if (fromAngle == undefined){
649                fromAngle = 0;
650        }
651        // toAngle縺梧悴螳夂ｾｩ縺ｪ繧峨�1繧偵そ繝�ヨ
652        if (toAngle == undefined){
653                toAngle = 1;
654        }
655*/
656
657        // 蜷�ｨｮ蛻晄悄蛹�
658        var children = undefined;
659        var parent = undefined;
660        var parentsChildren = undefined;
661
662        /*
663        ret['nodes'].push({'name':'aaaa', 'group': depth, 'x':(WIDTH/2), 'y':(HEIGHT/2)});
664        ret['links'].push({'source':parent, 'target':newIndex, 'value':5});
665        */
666
667        // links驟榊�縺ｮ謨ｰ縺縺醍ｹｰ繧願ｿ斐＠縺ｪ縺後ｉ
668        for (var i=0; i<links.length; i++){
669                // 縺昴�links縺ｮtarget縺稽yNodeIndex縺ｪ繧英arent繧偵そ繝�ヨ
670                if (links[i].target == myNodeIndex){
671                        parent = links[i].source;
672                }
673        }
674
675        // parent縺瑚ｦ九▽縺九▲縺ｦ縺�◆縺ｪ繧峨�
676        if (parent != undefined){
677                // parent縺ｨlinks繧呈ｸ｡縺揚et_children繝｡繧ｽ繝�ラ繧貞ｮ溯｡�
678                parentsChildren = get_children(parent, links);
679        }
680
681        if(myNodeIndex != 0){
682                DRAWHEIGHT += (NODEHEIGHT * 1.5);
683                var x = (depth * TREESPACE) + (TREESPACE / 3);
684                var y = DRAWHEIGHT;
685                nodes[myNodeIndex].x = x;
686                nodes[myNodeIndex].y = y;
687        }else{
688                var x = TREESPACE / 2;
689                var y = (NODEHEIGHT * 1.5) * ((PATHNUM - 1) / 2) + NODEHEIGHT;
690                nodes[myNodeIndex].x = x;
691                nodes[myNodeIndex].y = y;
692        }
693
694        /*
695        var x = (WIDTH/2) + depth * (WIDTH / (MAXDEPTH * 2 + 1)) * Math.sin(2 * 3.14 * ((toAngle + fromAngle) / 2));
696        var y = (HEIGHT/2) + depth * (HEIGHT / (MAXDEPTH * 2 + 1)) * Math.cos(2 * 3.14 * ((toAngle + fromAngle) / 2));
697        nodes[myNodeIndex].x = x;
698        nodes[myNodeIndex].y = y;
699
700        CIRCLE_SIZE = (WIDTH / (MAXDEPTH * 2 + 1));
701        */
702
703        children = get_children(myNodeIndex, links);
704
705        for (var i=0; i<children.length; i++){
706                if(i == 0){
707                        DRAWHEIGHT -= (NODEHEIGHT * 1.5);
708                }
709                var child = children[i];
710                set_map_location(child, nodes, links, depth+1, fromAngle + ((toAngle - fromAngle) / children.length) * i, fromAngle + ((toAngle - fromAngle) / children.length) * (i+1));
711        }
712
713}
714
715// 謖�ｮ壹＆繧後◆隕ｪ縺梧戟縺､蟄舌ｒ霑斐☆
716function get_children(index, links){
717        var children = new Array();
718        // links縺ｮ謨ｰ縺縺醍｢ｺ隱阪＠縺ｪ縺後ｉ
719        for (var i=0; i<links.length; i++){
720                // 隕ｪ縺梧ｸ｡縺輔ｌ縺溯ｦｪ縺ｨ荳€閾ｴ縺吶ｋ譎ゅ�蟄舌ｒ霑ｽ蜉
721                if (links[i].source == index){
722                        children.push(links[i].target);
723                }
724        }
725        return children;
726}
727
728// ZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZN
729// ZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZN
730
731function setEndpoints(ep){
732        for (var i = 0; i < ep.length; i++){
733                $("*[name=selectendpoint]").append('<option value="' + ep[i] + '">' + ep[i]);
734        }
735}
736
737function setEndpoint(){
738
739        var sel = $("*[name=selectendpoint]").val();
740
741        if(sel == "input"){
742                sel = $("*[name=inputendpoint]").val();
743        }
744
745        document.getElementById("showpath").style.display = "none";
746
747        $.ajax({
748                type: "GET",
749                url : getClassListURL,
750                data: {
751                    ep: sel
752  },
753                dataType: 'json',
754                success : function(epclass) {
755                        $("*[name=startclass] option").remove();
756                        $("*[name=endclass] option").remove();
757                        for (var i = 0; i < epclass.length; i++){
758                                $("*[name=startclass]").append('<option value="' + epclass[i] + '">' + epclass[i]);
759                                $("*[name=endclass]").append('<option value="' + epclass[i] + '">' + epclass[i]);
760                        }
761                },
762                error : function(XMLHttpRequest, textStatus, errorThrown) {
763                        alert("繝ｪ繧ｯ繧ｨ繧ｹ繝域凾縺ｫ縺ｪ繧薙ｉ縺九�繧ｨ繝ｩ繝ｼ縺檎匱逕溘＠縺ｾ縺励◆�� + textStatus +":\n" + errorThrown);
764                }
765        });
766        document.getElementById("seclass").style.display = "block";
767}
768
769function setSEClass(){
770
771        var sel = $("*[name=selectendpoint]").val();
772
773        if(sel == "input"){
774                sel = $("*[name=inputendpoint]").val();
775        }
776
777        MAXDEPTH = 0;
778
779        document.getElementById("selectpath").innerHTML = "";
780        document.getElementById("showpath").style.display = "none";
781
782        var selstart = $("*[name=startclass]").val();
783        var selend = $("*[name=endclass]").val();
784
785        $.ajax({
786                type: "GET",
787                url : getPathListURL,
788                data: {
789                    ep: sel,
790                    startclass: selstart,
791                    endclass: selend
792  },
793                dataType: 'text',
794                success : function(nodes) {
795                        jsontext = nodes;
796                        view_map();
797                },
798                error : function(XMLHttpRequest, textStatus, errorThrown) {
799                        alert("繝ｪ繧ｯ繧ｨ繧ｹ繝域凾縺ｫ縺ｪ繧薙ｉ縺九�繧ｨ繝ｩ繝ｼ縺檎匱逕溘＠縺ｾ縺励◆�� + textStatus +":\n" + errorThrown);
800                }
801        });
802}
803
804function getSPARQL(){
805
806        var selectpath = JSON.stringify(pathname);
807        //document.getElementById("selectpath").innerHTML=(resultText);
808
809        $.ajax({
810                type: "GET",
811                url : getSPARQLURL,
812                data: {
813                    jsonpath: selectpath
814  },
815                dataType: 'text',
816                success : function(sparql) {
817                        document.path.sparql.value = sparql;
818                        document.getElementById("showpath").style.display = "none";
819                        window.scrollTo(0, 0);
820                },
821                error : function(XMLHttpRequest, textStatus, errorThrown) {
822                        alert("繝ｪ繧ｯ繧ｨ繧ｹ繝域凾縺ｫ縺ｪ繧薙ｉ縺九�繧ｨ繝ｩ繝ｼ縺檎匱逕溘＠縺ｾ縺励◆�� + textStatus +":\n" + errorThrown);
823                }
824        });
825}
826
827function sendSPARQL(){
828        var ep = $("*[name=selectendpoint]").val();
829
830        if(ep == "input"){
831                ep = $("*[name=inputendpoint]").val();
832        }
833
834        var query = $("*[name=sparql]").val();
835
836        query = encodeURI(query);
837
838        openpage = ep + "?format=text%2Fhtml&query=" + query;
839
840        window.open(openpage);
841}
842
843// ZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZN
844// ZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZN
845
846-->
847
848</script>
849</head>
850<body>
851
852<div id="menu" style="position: absolute; overflow:hidden; top:0px; left:0px; width: 1000px; background-color: #eeeeee;">
853
854        <div id="setting" style="margin: 15px; float: left;">
855                <div id="endpoint">
856                        <form name="endpoint">
857                                <input type="text" style="width: 200px;" name="inputendpoint"><br>
858                                <select size=1 name="selectendpoint" style="width: 200px;">
859                                        <option value="input">Textbox
860                                </select><br>
861                                <input type="button" name="setendpoint" value="SetEndPoint" onClick="setEndpoint()">
862                        </form>
863                </div>
864                <div id="seclass" style="margin-top: 30px;">
865                        <form name="seclass">
866                                StartClass<br>
867                                <select size=1 name="startclass" style="width: 200px;">
868                                </select><br>
869                                EndClass<br>
870                                <select size=1 name="endclass" style="width: 200px;">
871                                </select><br>
872                                <input type="button" name="setclass" value="SetClass" onClick="setSEClass()">
873                        </form>
874                </div>
875        </div>
876
877        <div id="editing" style="margin: 15px 25px; float: right;">
878                <form name="path">
879                        <textarea name="sparql" style="width: 300px; height: 180px;"></textarea><br>
880                        <input type="button" name="sendsparql" value="Send SPARQL" onClick="sendSPARQL()"><br>
881                </form>
882        </div>
883</div>
884<div id="graph" style="position: absolute; top:0px; left:0px;">
885</div>
886<div id="showpath" style="display: none;">
887        <div id="selectpath" style="word-wrap: break-word;">
888        </div>
889        <input type="button" id="getsparqlbutton" name="getsparql" value="Get SPARQL" onClick="getSPARQL()">
890</div>
891</body>
892</html>
Note: リポジトリブラウザについてのヘルプは TracBrowser を参照してください。