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

リビジョン 102, 20.5 KB (コミッタ: lenz, 11 年 前)

メニューの位置等の変更
大量のパスが送られた際に備えツリー型に変更
オンマウスでパス情報の表示等細かなブラッシュアップ
  • 属性 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<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
8<link rel="stylesheet" type="text/css" media="screen" href="http://lod.hozo.jp/SparqlFinder/css/main.css" />
9<link rel="stylesheet" type="text/css" media="screen" href="http://lod.hozo.jp/SparqlFinder/css/table.css" />
10<link rel="stylesheet" type="text/css" media="screen" href="http://lod.hozo.jp/SparqlFinder/css/popup.css" />
11<style>
12
13.link {
14  stroke: #999;
15  stroke-opacity: .6;
16}
17.tlink {
18  stroke: #999;
19  stroke-opacity: .6;
20}
21
22#showpath {
23        position: absolute;
24        width: 200px;
25        height: auto;
26        padding: 10px;
27        background-color: #aaccee;
28        -webkit-border-radius: 10px;
29        -moz-border-radius: 10px;
30        border-radius: 10px;
31        -webkit-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
32        -moz-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
33        box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
34}
35
36</style>
37
38<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
39<script type="text/javascript" src="http://lod.hozo.jp/SparqlFinder/js/jquery-1.10.2.min.js"></script>
40<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
41<!-- 縺薙�荳€陦後ｒ蜈･繧後ｋ縺ｨ繧ｿ繝�メ縺ｧ縺ｮ繝峨Λ繝�げ縺悟庄閭ｽ縺ｫ縺ｪ繧�  -->
42<script type="text/javascript" src="http://lod.hozo.jp/SparqlFinder/js/jquery.ui.touch-punch.js" charset="UTF-8"></script>
43<script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script>
44<!--<script type="text/javascript" src="http://lod.hozo.jp/SparqlFinder/js/template.js" charset="UTF-8"></script>-->
45<script>
46<!--
47
48
49// SETURLSETURLSETURLSETURLSETURLSETURLSETURLSETURLSETURLSETURLSETURLSETURL
50// SETURLSETURLSETURLSETURLSETURLSETURLSETURLSETURLSETURLSETURLSETURLSETURL
51
52// 隱ｭ縺ｿ霎ｼ縺ｿ譎ゅ↓螳溯｡後€ゅお繝ｳ繝峨�繧､繝ｳ繝医�繝ｪ繧ｹ繝医ｒ騾壼ｸｸ縺ｮ驟榊�縺ｧ霑斐＆繧後ｋ縺薙→縺ｧ蛻昴ａ縺ｮ驕ｸ謚櫁い縺ｫ謖ｿ蜈･
53var getEndPointsURL = "ep.php";
54
55// 繧ｨ繝ｳ繝峨�繧､繝ｳ繝医′驕ｸ謚槭＆繧後◆繧峨◎縺ｮURL繧弾p縺ｨ縺�≧蜷榊燕縺ｧ騾∽ｿ｡縲√け繝ｩ繧ｹ繝ｪ繧ｹ繝医ｒ騾壼ｸｸ縺ｮ驟榊�縺ｧ霑斐＆繧後ｋ縺薙→縺ｧ繧ｯ繝ｩ繧ｹ縺ｮ驕ｸ謚櫁い縺ｫ謖ｿ蜈･
56var getClassListURL = "cl.php";
57
58// 繧ｯ繝ｩ繧ｹ莠後▽縺碁∈謚槭＆繧後◆繧峨◎縺ｮ繧ｯ繝ｩ繧ｹ蜷阪ｒstartclass縲‘ndclass縺ｨ縺�≧蜷榊燕縺ｧ縺昴ｌ縺槭ｌ騾∽ｿ｡縲√◎縺ｮ莠後▽繧堤ｵ舌�繝代せ縺ｮ繝ｪ繧ｹ繝医ｒJSON蠖｢蠑上�繝�く繧ｹ繝医〒霑斐＆繧後ｋ縺薙→縺ｧ縺昴ｌ繧偵げ繝ｩ繝輔↓謠冗判
59var getPathListURL = "node.php";
60
61// 繝代せ縺碁∈謚槭＆繧後◆繧泳sonpath縺ｨ縺�≧蜷榊燕縺ｧ繝代せ繧帝€壼ｸｸ縺ｮ驟榊�縺ｧ騾∽ｿ｡縲ヾPARQL繧ｯ繧ｨ繝ｪ繧偵ユ繧ｭ繧ｹ繝医〒蜿励￠蜿悶ｊ繝�く繧ｹ繝医お繝ｪ繧｢縺ｫ謖ｿ蜈･
62var getSPARQLURL = "gs.php";
63
64// 縺ｧ縺阪≠縺後▲縺欖PARQL繧帝€∽ｿ｡縺吶ｋURL�域悴螳溯｣�ｼ�
65
66// SETURLSETURLSETURLSETURLSETURLSETURLSETURLSETURLSETURLSETURLSETURLSETURL
67// SETURLSETURLSETURLSETURLSETURLSETURLSETURLSETURLSETURLSETURLSETURLSETURL
68
69
70var pathname = [];
71var PATHNUM = 0;
72var MAXDEPTH = 0;
73var TREESPACE = 0;
74var DRAWHEIGHT = 0;
75var jsontext = "";
76
77
78// 髢九＞縺溘ｉview_map繝｡繧ｽ繝�ラ繧貞他縺ｶ
79$(window).load(function() {
80
81// ZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZN
82// ZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZN
83
84        var menuwidth = window.innerWidth + "px";
85        var inputswidth = ((window.innerWidth - 100) / 2) + "px";
86        document.getElementById("menu").style.width = menuwidth;
87        document.endpoint.inputendpoint.style.width = inputswidth;
88        document.endpoint.selectendpoint.style.width = inputswidth;
89        document.seclass.startclass.style.width = inputswidth;
90        document.seclass.endclass.style.width = inputswidth;
91        document.path.sparql.style.width = inputswidth;
92        document.path.sendsparql.style.width = inputswidth;
93        document.getElementById("graph").style.top = document.getElementById("menu").offsetHeight + "px";
94
95        $.ajax({
96                type: "GET",
97                url : getEndPointsURL,
98                dataType: 'json',
99                success : function(data) {
100                        setEndpoints(data);
101                },
102                error : function(XMLHttpRequest, textStatus, errorThrown) {
103                        alert("繝ｪ繧ｯ繧ｨ繧ｹ繝域凾縺ｫ縺ｪ繧薙ｉ縺九�繧ｨ繝ｩ繝ｼ縺檎匱逕溘＠縺ｾ縺励◆�� + textStatus +":\n" + errorThrown);
104                }
105        });
106
107// ZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZN
108// ZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZN
109
110});
111
112// 謠冗判蜃ｦ逅�
113function view_map(){
114
115        // make_data繝｡繧ｽ繝�ラ縺ｮ邨先棡繧貞叙蠕�
116        var json = make_data(0);
117        // 豺ｱ縺輔ｒ蜿門ｾ�
118        var dep = MAXDEPTH;
119
120        // 蜃ｺ譚･荳翫′縺｣縺溽ｵ先棡繧呈ｸ｡縺励※繝槭ャ繝嶺ｸ翫�繝ｭ繧ｱ繝ｼ繧ｷ繝ｧ繝ｳ繧偵そ繝�ヨ
121        set_map_location(0, json['nodes'], json['links']);
122
123        var width = window.innerWidth;
124        var height = TREESPACE * PATHNUM;
125
126        // 繧ｫ繝ｩ繝ｼ繧貞叙蠕�
127        var color = d3.scale.category20();
128
129        // SVG縺悟ｭ伜惠縺吶ｋ縺ｪ繧峨�蜑企勁
130        if (d3.select("#graph").select("svg")) {
131                d3.select("#graph").select("svg").remove();
132        }
133
134        // 繝峨Λ繝�げ譎ゅ�蜃ｦ逅�
135        var drag = d3.behavior.drag().on("drag", function(d,i) {
136            d.x += d3.event.dx
137            d.y += d3.event.dy
138
139            d. isDrag = true;
140            redraw();
141        });
142
143        // SVG縺ｮ霑ｽ蜉
144        var svg = d3.select("#graph").append("svg")
145            .attr("width", width)
146            .attr("height", height);
147
148        var link = svg.selectAll(".link")
149        .data(json.links)
150        .enter().append("line")
151        .attr("class", "link")
152        .style("stroke-width", function(d) { return Math.sqrt(d.value); });
153
154        var node = svg.selectAll(".node")
155        .data(json.nodes)
156        .enter().append("circle")
157        .attr("class", "node")
158        .attr("r", 20)
159        .attr("cx", function(d) { return d.x;} )
160        .attr("cy",  function(d) { return d.y; })
161        .style("stroke", function(d) { return '#ffffff'; })
162        .style("stroke-width", function(d) { return '1.5px'; })
163        .style("fill", function(d) { return color(d.group); })
164        .style("cursor", function(d) { return 'pointer'; })
165        .call(drag);
166
167        var tnode = svg.selectAll("text.node")
168        .data(json.nodes)
169        .enter().append("svg:text")
170        .attr("class", "tnode")
171        .attr("x", function(d) { return d.x; })
172        .attr("y", function(d) { return d.y; })
173        .text(function(d) { return d.name; })
174        .style("fill", function(d) { return '#000000'; })
175        .style("stroke", function(d) { return '#000000'; })
176        .style("stroke-width", function(d) { return '1.5px'; })
177        .style("text-anchor", function(d) { return 'middle'; })
178        .style("pointer-events", "none")
179        .call(drag);
180
181        var tlink = svg.selectAll("text.link")
182        .data(json.links)
183        .enter().append("svg:text")
184        .attr("class", "tlink")
185        .attr("x", function(d) { return (json.nodes[d.source].x + json.nodes[d.target].x) / 2; })
186        .attr("y", function(d) { return (json.nodes[d.source].y + json.nodes[d.target].y) / 2; })
187        //.text(function(d) { return d.property; })
188        .style("fill", function(d) { return '#000000'; })
189        .style("text-anchor", function(d) { return 'middle'; });
190
191        // 繝弱�繝峨∈縺ｮ繧ｪ繝ｳ繝槭え繧ｹ縺ｧ繝代せ謗｢邏｢
192        node.on("mouseover", function(d){
193
194                var path = [];
195                pathname = [];
196                path.push(d.nodeid);
197                pathname.push(d.name);
198                do{
199                        for(var i = 0; i < link.data().length; i++){
200                                if(path[(path.length-1)] == link.data()[i].target){
201                                        path.push(link.data()[i].source);
202                                        pathname.push(link.data()[i].property);
203                                        pathname.push(node.data()[link.data()[i].source].name);
204                                }
205                        }
206                }while(path[(path.length-1)] != 0);
207                var resultText = "<h3>Selected Path</h3>";
208                for (var i = pathname.length;i > 0; i--){
209                        if(i % 2 == 1){
210                                resultText = resultText + "<span style=\"font-weight: bold;\">" + pathname[i - 1] + "</span><br><br>";
211                        }else{
212                                resultText = resultText + pathname[i - 1] + "<br><br>";
213                        }
214                }
215                document.getElementById("selectpath").innerHTML=(resultText);
216                document.getElementById("showpath").style.display = "block";
217
218                var xPosition = parseFloat(d3.select(this).attr("cx")) + 22;
219                var yPosition = parseFloat(d3.select(this).attr("cy") - document.getElementById("showpath").offsetHeight + document.getElementById("menu").offsetHeight) + 22;
220
221                if(xPosition < 0){
222                        xPosition = 0;
223                }
224                if(yPosition < 0){
225                        yPosition = 0;
226                }
227
228                document.getElementById("showpath").style.left = xPosition + "px"
229                document.getElementById("showpath").style.top = yPosition + "px"
230                document.getElementById("showpath").style.display = "block";
231
232                tlink
233                .text(function(d) {
234                        var linktext = "";
235                        for(var t = 0; t < path.length; t++){
236                                if(path[t] == d.target){
237                                        linktext = d.property;
238                                }
239                        }
240                        return linktext;
241                })
242
243            if (!d. isDrag){
244                        d3.selectAll(".node").style("stroke-width", function(d) { return '1.5px'; });
245                        d3.selectAll(".node").style("stroke", function(d) { return '#ffffff'; });
246                        d3.select(this).style("stroke-width", function(d) { return 2; });
247                        d3.select(this).style("stroke", function(d) { return '#0000ff'; });
248            }
249
250            d.isDrag = false;
251        });
252
253        // 蝓ｺ譛ｬ繝吶け繝医Ν邂怜�
254        var vec = function(sx, sy, dx, dy){
255                var vx = (dx - sx);
256                var vy = (dy - sy);
257                var dist = Math.sqrt(Math.pow(vx, 2) + Math.pow(vy, 2));
258                var ret = [];
259                ret.x = vx / dist;
260                ret.y = vy / dist;
261
262                return ret;
263        };
264
265        var redraw = function (){
266                link
267                .attr("x1", function(d) {return node.data()[d.source].x;})
268                .attr("y1", function(d) {return node.data()[d.source].y;})
269                .attr("x2", function(d) {return node.data()[d.target].x;})
270                .attr("y2", function(d) {return node.data()[d.target].y;});
271
272                tlink
273                .attr("x", function(d) {return (node.data()[d.source].x + node.data()[d.target].x) / 2;})
274                .attr("y", function(d) {return ((node.data()[d.source].y + node.data()[d.target].y) / 2) + 5;});
275
276                node
277                .attr("cx", function(d) {return d.x;})
278                .attr("cy", function(d) {return d.y;});
279
280                tnode
281                .attr("x", function(d) {return d.x;})
282                .attr("y", function(d) {
283                        var updown = 18;
284                        if(d.group % 2 == 1){
285                                updown = -8;
286                        }
287                        return d.y + updown;
288                });
289        };
290
291        svg.on("click", function() {
292                document.getElementById("showpath").style.display = "none";
293                d3.selectAll(".node").style("stroke-width", function(d) { return '1.5px'; });
294                d3.selectAll(".node").style("stroke", function(d) { return '#ffffff'; });
295                tlink
296                .text("");
297        });
298
299        redraw();
300}
301
302// 繝��繧ｿ縺ｮ菴懈�繝｡繧ｽ繝�ラ
303function make_data(tdepth, ret, parent, depth){
304        // ret縺梧悴螳夂ｾｩ縺ｪ繧峨�螳夂ｾｩ縺励※莉｣蜈･
305        if (ret == undefined){
306                ret = new Object();
307                ret['nodes'] = new Array();
308                ret['links'] = new Array();
309        }
310
311        PATHNUM = 0;
312        MAXDEPTH = 0;
313        TREESPACE = 0;
314        DRAWHEIGHT = 0;
315
316        var obj = JSON.parse(jsontext);
317        // obj繝医ャ繝鈴嚴螻､縺ｮ謨ｰ縺縺醍ｹｰ繧願ｿ斐＠縺ｪ縺後ｉ
318        for(var i = 0; i < obj['paths'].length; i++){
319                if(i == 0){
320                        // 蛻晏屓縺縺代Ν繝ｼ繝医ヮ繝ｼ繝峨ｒ繝励ャ繧ｷ繝･
321                        ret['nodes'].push({'name':obj['paths'][0]['startClassURI'], 'group': 0, 'x':50, 'y':50, 'nodeid':ret['nodes'].length});
322                }
323                // 蜈医↓source縺ｫ0�医Ν繝ｼ繝茨ｼ峨ｒ莉｣蜈･
324                var source = 0;
325                // 蜈ｱ騾壹Ν繝ｼ繝亥愛螳壹ｒtrue縺ｫ
326                var isCommon = true;
327
328                // classLinks縺ｮ謨ｰ縺縺醍ｹｰ繧願ｿ斐＠縺ｪ縺後ｉ
329                for(var j = 0;j < obj['paths'][i]['classLinks'].length; j++){
330
331                        if(MAXDEPTH < j+1){
332                                MAXDEPTH = j+1;
333                        }
334                        // 縺薙％縺ｾ縺ｧ蜈ｱ騾壹Ν繝ｼ繝医↑繧�
335                        if(isCommon){
336                                // 莉雁屓繧ょ�騾壹°遒ｺ隱阪☆繧九◆繧√�繝輔Λ繧ｰ
337                                var isCommonNow = false;
338                                // nodes驟榊�縺ｫ蜷後§linkedClass縺梧里縺ｫ縺ゅｋ縺狗｢ｺ隱�
339                                var targets = [];
340                                for(var k = 0; k < ret['nodes'].length; k++){
341                                        // 蜷碁嚴螻､縺九▽蜷後§蜷榊燕縺ｮ繧ゅ�縺後≠縺｣縺溘ｉtargets驟榊�縺ｫ逡ｪ蜿ｷ繧定ｿｽ蜉
342                                        if(ret['nodes'][k]['group'] == (j+1) && obj['paths'][i]['classLinks'][j]['linkedClassURI'] == ret['nodes'][k]['name']){
343                                                targets.push(k);
344                                        }
345                                }
346
347                                // 譌｢縺ｫ縺ゅ▲縺溷ｴ蜷医�links驟榊�縺ｫ蜷後§link縺悟ｭ伜惠縺吶ｋ縺狗｢ｺ隱�
348                                if(targets.length != 0){
349                                        // 蜈医⊇縺ｩ隕九▽縺代◆targets縺ｮ謨ｰ縺縺醍ｹｰ繧願ｿ斐＠縺ｪ縺後ｉ
350                                        for(var l = 0; l <targets.length; l++){
351                                                // links驟榊�縺ｫ蜈ｨ縺丞酔縺俶擅莉ｶ縺ｮ繧ゅ�縺後≠繧九°遒ｺ隱�
352                                                for(var m = 0; m < ret['links'].length; m++){
353                                                        // 縺ゅ▲縺溷ｴ蜷井ｻ雁屓縺ｮ繧ゅ�縺ｯ霑ｽ蜉縺帙★source繧呈峩譁ｰ縺励※谺｡縺ｸ
354                                                        if(ret['links'][m]['source'] == source && ret['links'][m]['target'] == targets[l] && ret['links'][m]['property'] == obj['paths'][i]['classLinks'][j]['propertyURI'] && !isCommonNow){
355                                                                // 蜈ｱ騾壹Ν繝ｼ繝医ヵ繝ｩ繧ｰ繧偵が繝ｳ
356                                                                isCommonNow = true;
357                                                                source = targets[l];
358                                                        }
359                                                }
360                                        }
361
362                                        // 蜷дarget繧堤｢ｺ隱阪＠縺ｦ蜈ｱ騾壹Ν繝ｼ繝医〒縺ｯ縺ｪ縺九▲縺溷ｴ蜷域眠隕剰ｿｽ蜉
363                                        if(!isCommonNow){
364                                                isCommon = false;
365                                                ret['nodes'].push({'name':obj['paths'][i]['classLinks'][j]['linkedClassURI'], 'group': (j+1), 'x':0, 'y':0, 'nodeid':ret['nodes'].length});
366                                                ret['links'].push({'source':source, 'target':ret['nodes'].length - 1, 'value':5, 'property':obj['paths'][i]['classLinks'][j]['propertyURI']});
367                                                source = ret['nodes'].length - 1;
368                                        }
369
370                                // 縺ｪ縺九▲縺溷ｴ蜷医�蛻･譚｡莉ｶ縺ｪ縺ｮ縺ｧ譁ｰ隕剰ｿｽ蜉縺励※谺｡縺ｸ
371                                }else{
372
373                                        isCommon = false;
374                                        ret['nodes'].push({'name':obj['paths'][i]['classLinks'][j]['linkedClassURI'], 'group': (j+1), 'x':0, 'y':0, 'nodeid':ret['nodes'].length});
375                                        ret['links'].push({'source':source, 'target':ret['nodes'].length - 1, 'value':5, 'property':obj['paths'][i]['classLinks'][j]['propertyURI']});
376                                        source = ret['nodes'].length - 1;
377                                }
378                        // 譌｢縺ｫ蜈ｱ騾壹Ν繝ｼ繝医〒縺ｪ縺�↑繧画眠隕剰ｿｽ蜉縺励※谺｡縺ｸ
379                        }else{
380                                ret['nodes'].push({'name':obj['paths'][i]['classLinks'][j]['linkedClassURI'], 'group': (j+1), 'x':0, 'y':0, 'nodeid':ret['nodes'].length});
381                                ret['links'].push({'source':source, 'target':ret['nodes'].length - 1, 'value':5, 'property':obj['paths'][i]['classLinks'][j]['propertyURI']});
382                                source = ret['nodes'].length - 1;
383                        }
384
385                }
386                PATHNUM++;
387        }
388        TREESPACE = (window.innerWidth - 200) / (MAXDEPTH + 1);
389        DRAWHEIGHT = TREESPACE / 2;
390
391        // 縺ｧ縺阪◆邨先棡繧定ｿ斐☆
392        return ret;
393}
394
395// 逕滓�縺輔ｌ縺溘ョ繝ｼ繧ｿ縺ｮ螳滄圀縺ｮ繝ｭ繧ｱ繝ｼ繧ｷ繝ｧ繝ｳ繧定ｨ育ｮ励☆繧九Γ繧ｽ繝�ラ�亥�蝗槭�myNodeIndex縺�縲］odes縺ｫ逕滓�縺輔ｌ縺殤odes驟榊�縲〕inks縺ｫ逕滓�縺輔ｌ縺殕inks驟榊�縺梧ｸ｡縺輔ｌ繧具ｼ�
396function set_map_location(myNodeIndex, nodes, links, depth, fromAngle, toAngle){
397
398        // depth縺梧悴螳夂ｾｩ縺ｪ繧峨�0繧偵そ繝�ヨ
399        if (depth == undefined){
400                depth = 0;
401        }
402/*
403        // fromAngle縺梧悴螳夂ｾｩ縺ｪ繧峨�0繧偵そ繝�ヨ
404        if (fromAngle == undefined){
405                fromAngle = 0;
406        }
407        // toAngle縺梧悴螳夂ｾｩ縺ｪ繧峨�1繧偵そ繝�ヨ
408        if (toAngle == undefined){
409                toAngle = 1;
410        }
411*/
412
413        // 蜷�ｨｮ蛻晄悄蛹�
414        var children = undefined;
415        var parent = undefined;
416        var parentsChildren = undefined;
417
418        /*
419        ret['nodes'].push({'name':'aaaa', 'group': depth, 'x':(WIDTH/2), 'y':(HEIGHT/2)});
420        ret['links'].push({'source':parent, 'target':newIndex, 'value':5});
421        */
422
423        // links驟榊�縺ｮ謨ｰ縺縺醍ｹｰ繧願ｿ斐＠縺ｪ縺後ｉ
424        for (var i=0; i<links.length; i++){
425                // 縺昴�links縺ｮtarget縺稽yNodeIndex縺ｪ繧英arent繧偵そ繝�ヨ
426                if (links[i].target == myNodeIndex){
427                        parent = links[i].source;
428                }
429        }
430
431        // parent縺瑚ｦ九▽縺九▲縺ｦ縺�◆縺ｪ繧峨�
432        if (parent != undefined){
433                // parent縺ｨlinks繧呈ｸ｡縺揚et_children繝｡繧ｽ繝�ラ繧貞ｮ溯｡�
434                parentsChildren = get_children(parent, links);
435        }
436
437        if(myNodeIndex != 0){
438                DRAWHEIGHT += (TREESPACE / 2);
439                var x = (depth * TREESPACE) + (TREESPACE / 2);
440                var y = DRAWHEIGHT;
441                nodes[myNodeIndex].x = x;
442                nodes[myNodeIndex].y = y;
443        }else{
444                var x = TREESPACE / 2;
445                var y = (TREESPACE / 2) * (PATHNUM / 2) + (TREESPACE / 4);
446                nodes[myNodeIndex].x = x;
447                nodes[myNodeIndex].y = y;
448        }
449
450        /*
451        var x = (WIDTH/2) + depth * (WIDTH / (MAXDEPTH * 2 + 1)) * Math.sin(2 * 3.14 * ((toAngle + fromAngle) / 2));
452        var y = (HEIGHT/2) + depth * (HEIGHT / (MAXDEPTH * 2 + 1)) * Math.cos(2 * 3.14 * ((toAngle + fromAngle) / 2));
453        nodes[myNodeIndex].x = x;
454        nodes[myNodeIndex].y = y;
455
456        CIRCLE_SIZE = (WIDTH / (MAXDEPTH * 2 + 1));
457        */
458
459        children = get_children(myNodeIndex, links);
460
461        for (var i=0; i<children.length; i++){
462                if(i == 0){
463                        DRAWHEIGHT -= (TREESPACE / 2);
464                }
465                var child = children[i];
466                set_map_location(child, nodes, links, depth+1, fromAngle + ((toAngle - fromAngle) / children.length) * i, fromAngle + ((toAngle - fromAngle) / children.length) * (i+1));
467        }
468
469}
470
471// 謖�ｮ壹＆繧後◆隕ｪ縺梧戟縺､蟄舌ｒ霑斐☆
472function get_children(index, links){
473        var children = new Array();
474        // links縺ｮ謨ｰ縺縺醍｢ｺ隱阪＠縺ｪ縺後ｉ
475        for (var i=0; i<links.length; i++){
476                // 隕ｪ縺梧ｸ｡縺輔ｌ縺溯ｦｪ縺ｨ荳€閾ｴ縺吶ｋ譎ゅ�蟄舌ｒ霑ｽ蜉
477                if (links[i].source == index){
478                        children.push(links[i].target);
479                }
480        }
481        return children;
482}
483
484// ZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZN
485// ZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZN
486
487function setEndpoints(ep){
488        for (var i = 0; i < ep.length; i++){
489                $("*[name=selectendpoint]").append('<option value="' + ep[i] + '">' + ep[i]);
490        }
491}
492
493function setEndpoint(){
494
495        var sel = $("*[name=selectendpoint]").val();
496
497        if(sel == "input"){
498                sel = $("*[name=inputendpoint]").val();
499                alert(sel);
500        }
501
502        $.ajax({
503                type: "GET",
504                url : getClassListURL,
505                data: {
506                    ep: sel
507  },
508                dataType: 'json',
509                success : function(epclass) {
510                        $("*[name=startclass] option").remove();
511                        $("*[name=endclass] option").remove();
512                        for (var i = 0; i < epclass.length; i++){
513                                $("*[name=startclass]").append('<option value="' + epclass[i] + '">' + epclass[i]);
514                                $("*[name=endclass]").append('<option value="' + epclass[i] + '">' + epclass[i]);
515                        }
516                },
517                error : function(XMLHttpRequest, textStatus, errorThrown) {
518                        alert("繝ｪ繧ｯ繧ｨ繧ｹ繝域凾縺ｫ縺ｪ繧薙ｉ縺九�繧ｨ繝ｩ繝ｼ縺檎匱逕溘＠縺ｾ縺励◆�� + textStatus +":\n" + errorThrown);
519                }
520        });
521        document.getElementById("seclass").style.display = "block";
522}
523
524function setSEClass(){
525
526        MAXDEPTH = 0;
527
528        document.getElementById("selectpath").innerHTML = "";
529
530        var selstart = $("*[name=startclass]").val();
531        var selend = $("*[name=endclass]").val();
532
533        $.ajax({
534                type: "GET",
535                url : getPathListURL,
536                data: {
537                    startclass: selstart,
538                    endclass: selend
539  },
540                dataType: 'text',
541                success : function(nodes) {
542                        jsontext = nodes;
543                        view_map();
544                },
545                error : function(XMLHttpRequest, textStatus, errorThrown) {
546                        alert("繝ｪ繧ｯ繧ｨ繧ｹ繝域凾縺ｫ縺ｪ繧薙ｉ縺九�繧ｨ繝ｩ繝ｼ縺檎匱逕溘＠縺ｾ縺励◆�� + textStatus +":\n" + errorThrown);
547                }
548        });
549}
550
551function getSPARQL(){
552
553        var selectpath = JSON.stringify(pathname);
554        //document.getElementById("selectpath").innerHTML=(resultText);
555
556        $.ajax({
557                type: "GET",
558                url : getSPARQLURL,
559                data: {
560                    jsonpath: selectpath
561  },
562                dataType: 'text',
563                success : function(sparql) {
564                        document.path.sparql.value = sparql;
565                        document.getElementById("showpath").style.display = "none";
566                        window.scrollTo(0, 0);
567                },
568                error : function(XMLHttpRequest, textStatus, errorThrown) {
569                        alert("繝ｪ繧ｯ繧ｨ繧ｹ繝域凾縺ｫ縺ｪ繧薙ｉ縺九�繧ｨ繝ｩ繝ｼ縺檎匱逕溘＠縺ｾ縺励◆�� + textStatus +":\n" + errorThrown);
570                }
571        });
572}
573
574// ZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZN
575// ZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZN
576
577-->
578
579</script>
580</head>
581<body>
582
583<div id="menu" style="position: absolute; overflow:hidden; top:0px; left:0px; width: 1000px; background-color: #cccccc;">
584
585        <div id="setting" style="margin: 15px; float: left;">
586                <div id="endpoint">
587                        <form name="endpoint">
588                                <input type="text" style="width: 200px;" name="inputendpoint"><br>
589                                <select size=1 name="selectendpoint" style="width: 200px;">
590                                        <option value="input">Textbox
591                                </select><br>
592                                <input type="button" name="setendpoint" value="SetEndPoint" onClick="setEndpoint()">
593                        </form>
594                </div>
595                <div id="seclass" style="margin-top: 30px;">
596                        <form name="seclass">
597                                StartClass<br>
598                                <select size=1 name="startclass" style="width: 200px;">
599                                </select><br>
600                                EndClass<br>
601                                <select size=1 name="endclass" style="width: 200px;">
602                                </select><br>
603                                <input type="button" name="setclass" value="SetClass" onClick="setSEClass()">
604                        </form>
605                </div>
606        </div>
607
608        <div id="editing" style="margin: 15px 25px; float: right;">
609                <form name="path">
610                        <textarea name="sparql" style="width: 300px; height: 180px;"></textarea><br>
611                        <input type="button" name="sendsparql" value="Send SPARQL" onClick="sendSPARQL()"><br>
612                </form>
613        </div>
614</div>
615<div id="graph" style="position: absolute; top:0px; left:0px;">
616</div>
617<div id="showpath" style="display: none;">
618        <div id="selectpath" style="word-wrap: break-word;">
619        </div>
620        <input type="button" name="getsparql" value="Get SPARQL" onClick="getSPARQL()">
621</div>
622</body>
623</html>
Note: リポジトリブラウザについてのヘルプは TracBrowser を参照してください。