root/SPARQLBuilderWWW/web/jsgui.html @ 125

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

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