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

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

javascript版GUIのコミット

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