Context Navigation

jsgui.html @ 170

リビジョン 170, 27.9 KB (コミッタ: atsuko, 10 年前)
URIエンコーディングに関するエラーを訂正

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

Note: リポジトリブラウザについてのヘルプは TracBrowser を参照してください。

Context Navigation

root/SPARQLBuilderWWW/web/jsgui.html @ 170

異なるフォーマットでダウンロード: