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

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

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