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

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

メニューの位置等の変更
大量のパスが送られた際に備えツリー型に変更
オンマウスでパス情報の表示等細かなブラッシュアップ

  • 属性 svn:mime-type の設定値 text/plain
行番号 
1<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
2<html>
3<head>
4<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
5<title>SPARQL Builder GUI</title>
6
7<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<!-- 縺薙�荳€陦後r蜈・繧後k縺ィ繧ソ繝�メ縺ァ縺ョ繝峨Λ繝�げ縺悟庄閭ス縺ォ縺ェ繧�  -->
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// 隱ュ縺ソ霎シ縺ソ譎ゅ↓螳溯。後€ゅお繝ウ繝峨�繧、繝ウ繝医�繝ェ繧ケ繝医r騾壼クク縺ョ驟榊�縺ァ霑斐&繧後k縺薙→縺ァ蛻昴a縺ョ驕ク謚櫁い縺ォ謖ソ蜈・
53var getEndPointsURL = "ep.php";
54
55// 繧ィ繝ウ繝峨�繧、繝ウ繝医′驕ク謚槭&繧後◆繧峨◎縺ョURL繧弾p縺ィ縺�≧蜷榊燕縺ァ騾∽ソ。縲√け繝ゥ繧ケ繝ェ繧ケ繝医r騾壼クク縺ョ驟榊�縺ァ霑斐&繧後k縺薙→縺ァ繧ッ繝ゥ繧ケ縺ョ驕ク謚櫁い縺ォ謖ソ蜈・
56var getClassListURL = "cl.php";
57
58// 繧ッ繝ゥ繧ケ莠後▽縺碁∈謚槭&繧後◆繧峨◎縺ョ繧ッ繝ゥ繧ケ蜷阪rstartclass縲‘ndclass縺ィ縺�≧蜷榊燕縺ァ縺昴l縺槭l騾∽ソ。縲√◎縺ョ莠後▽繧堤オ舌�繝代せ縺ョ繝ェ繧ケ繝医rJSON蠖「蠑上�繝�く繧ケ繝医〒霑斐&繧後k縺薙→縺ァ縺昴l繧偵げ繝ゥ繝輔↓謠冗判
59var getPathListURL = "node.php";
60
61// 繝代せ縺碁∈謚槭&繧後◆繧泳sonpath縺ィ縺�≧蜷榊燕縺ァ繝代せ繧帝€壼クク縺ョ驟榊�縺ァ騾∽ソ。縲ヾPARQL繧ッ繧ィ繝ェ繧偵ユ繧ュ繧ケ繝医〒蜿励¢蜿悶j繝�く繧ケ繝医お繝ェ繧「縺ォ謖ソ蜈・
62var getSPARQLURL = "gs.php";
63
64// 縺ァ縺阪≠縺後▲縺欖PARQL繧帝€∽ソ。縺吶kURL�域悴螳溯」�シ�
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// 髢九>縺溘iview_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("繝ェ繧ッ繧ィ繧ケ繝域凾縺ォ縺ェ繧薙i縺九�繧ィ繝ゥ繝シ縺檎匱逕溘@縺セ縺励◆�� + 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        // 豺ア縺輔r蜿門セ�
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縺悟ュ伜惠縺吶k縺ェ繧峨�蜑企勁
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繝医ャ繝鈴嚴螻、縺ョ謨ー縺縺醍ケー繧願ソ斐@縺ェ縺後i
318        for(var i = 0; i < obj['paths'].length; i++){
319                if(i == 0){
320                        // 蛻晏屓縺縺代Ν繝シ繝医ヮ繝シ繝峨r繝励ャ繧キ繝・
321                        ret['nodes'].push({'name':obj['paths'][0]['startClassURI'], 'group': 0, 'x':50, 'y':50, 'nodeid':ret['nodes'].length});
322                }
323                // 蜈医↓source縺ォ0�医Ν繝シ繝茨シ峨r莉」蜈・
324                var source = 0;
325                // 蜈ア騾壹Ν繝シ繝亥愛螳壹rtrue縺ォ
326                var isCommon = true;
327
328                // classLinks縺ョ謨ー縺縺醍ケー繧願ソ斐@縺ェ縺後i
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縺梧里縺ォ縺ゅk縺狗「コ隱�
339                                var targets = [];
340                                for(var k = 0; k < ret['nodes'].length; k++){
341                                        // 蜷碁嚴螻、縺九▽蜷後§蜷榊燕縺ョ繧ゅ�縺後≠縺」縺溘itargets驟榊�縺ォ逡ェ蜿キ繧定ソス蜉
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縺悟ュ伜惠縺吶k縺狗「コ隱�
348                                if(targets.length != 0){
349                                        // 蜈医⊇縺ゥ隕九▽縺代◆targets縺ョ謨ー縺縺醍ケー繧願ソ斐@縺ェ縺後i
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// 逕滓�縺輔l縺溘ョ繝シ繧ソ縺ョ螳滄圀縺ョ繝ュ繧ア繝シ繧キ繝ァ繝ウ繧定ィ育ョ励☆繧九Γ繧ス繝�ラ�亥�蝗槭�myNodeIndex縺�縲]odes縺ォ逕滓�縺輔l縺殤odes驟榊�縲〕inks縺ォ逕滓�縺輔l縺殕inks驟榊�縺梧ク。縺輔l繧具シ�
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驟榊�縺ョ謨ー縺縺醍ケー繧願ソ斐@縺ェ縺後i
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// 謖�ョ壹&繧後◆隕ェ縺梧戟縺、蟄舌r霑斐☆
472function get_children(index, links){
473        var children = new Array();
474        // links縺ョ謨ー縺縺醍「コ隱阪@縺ェ縺後i
475        for (var i=0; i<links.length; i++){
476                // 隕ェ縺梧ク。縺輔l縺溯ヲェ縺ィ荳€閾エ縺吶k譎ゅ�蟄舌r霑ス蜉
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("繝ェ繧ッ繧ィ繧ケ繝域凾縺ォ縺ェ繧薙i縺九�繧ィ繝ゥ繝シ縺檎匱逕溘@縺セ縺励◆�� + 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("繝ェ繧ッ繧ィ繧ケ繝域凾縺ォ縺ェ繧薙i縺九�繧ィ繝ゥ繝シ縺檎匱逕溘@縺セ縺励◆�� + 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("繝ェ繧ッ繧ィ繧ケ繝域凾縺ォ縺ェ繧薙i縺九�繧ィ繝ゥ繝シ縺檎匱逕溘@縺セ縺励◆�� + 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 を参照してください。