Index: /BH13SPARQLBuilder/src/hozo/maptool/jsgui.html =================================================================== --- /BH13SPARQLBuilder/src/hozo/maptool/jsgui.html (revision 92) +++ /BH13SPARQLBuilder/src/hozo/maptool/jsgui.html (revision 102) @@ -18,4 +18,18 @@ stroke: #999; stroke-opacity: .6; +} + +#showpath { + position: absolute; + width: 200px; + height: auto; + padding: 10px; + background-color: #aaccee; + -webkit-border-radius: 10px; + -moz-border-radius: 10px; + border-radius: 10px; + -webkit-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4); + -moz-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4); + box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4); } @@ -54,11 +68,11 @@ - -// 謠冗判鬆伜沺縺ｮ繧ｵ繧､繧ｺ -var WIDTH = window.innerWidth * 3 / 4; -var HEIGHT = window.innerWidth * 3 / 4; var pathname = []; +var PATHNUM = 0; var MAXDEPTH = 0; +var TREESPACE = 0; +var DRAWHEIGHT = 0; var jsontext = ""; + // 髢九＞縺溘ｉview_map繝｡繧ｽ繝�ラ繧貞他縺ｶ @@ -68,13 +82,14 @@ // ZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZN - var rleft = (window.innerWidth * 3 / 4) + "px"; - var rwidth = (window.innerWidth / 4) - 50 + "px"; - document.getElementById("right").style.left = rleft; - document.getElementById("right").style.width = rwidth; - document.endpoint.inputendpoint.style.width = rwidth; - document.endpoint.selectendpoint.style.width = rwidth; - document.seclass.startclass.style.width = rwidth; - document.seclass.endclass.style.width = rwidth; - document.path.sparql.style.width = rwidth; + var menuwidth = window.innerWidth + "px"; + var inputswidth = ((window.innerWidth - 100) / 2) + "px"; + document.getElementById("menu").style.width = menuwidth; + document.endpoint.inputendpoint.style.width = inputswidth; + document.endpoint.selectendpoint.style.width = inputswidth; + document.seclass.startclass.style.width = inputswidth; + document.seclass.endclass.style.width = inputswidth; + document.path.sparql.style.width = inputswidth; + document.path.sendsparql.style.width = inputswidth; + document.getElementById("graph").style.top = document.getElementById("menu").offsetHeight + "px"; $.ajax({ @@ -93,6 +108,4 @@ // ZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZN - //setEndpoints(jsonep); - // view_map(); }); @@ -100,28 +113,24 @@ function view_map(){ - // 豺ｱ縺輔ｒ蜿門ｾ励€∵�遉ｺ逧�↓謨ｰ蛟､蛹� - var dep = 0;//$('#map_depth').val(); - //dep = parseInt(dep, 10); - -//http://jsdo.it/_shimizu/hszt -//http://www.h2.dion.ne.jp/~defghi/svgMemo/svgMemo_19.htm - - // 豺ｱ縺輔ｒ蠑墓焚縺ｨ縺励※貂｡縺励◆make_testdata繝｡繧ｽ繝�ラ縺ｮ邨先棡繧貞叙蠕� - var json = make_testdata(dep); + // make_data繝｡繧ｽ繝�ラ縺ｮ邨先棡繧貞叙蠕� + var json = make_data(0); + // 豺ｱ縺輔ｒ蜿門ｾ� + var dep = MAXDEPTH; // 蜃ｺ譚･荳翫′縺｣縺溽ｵ先棡繧呈ｸ｡縺励※繝槭ャ繝嶺ｸ翫�繝ｭ繧ｱ繝ｼ繧ｷ繝ｧ繝ｳ繧偵そ繝�ヨ set_map_location(0, json['nodes'], json['links']); - var width = WIDTH,縲€height = HEIGHT; - - // 繧ｫ繝ｩ繝ｼ繧貞叙蠕暦ｼ� + var width = window.innerWidth; + var height = TREESPACE * PATHNUM; + + // 繧ｫ繝ｩ繝ｼ繧貞叙蠕� var color = d3.scale.category20(); - // svg縺悟ｭ伜惠縺吶ｋ縺ｪ繧峨�蜑企勁�� + // SVG縺悟ｭ伜惠縺吶ｋ縺ｪ繧峨�蜑企勁 if (d3.select("#graph").select("svg")) { d3.select("#graph").select("svg").remove(); } - // 繧上°繧峨〓 + // 繝峨Λ繝�げ譎ゅ�蜃ｦ逅� var drag = d3.behavior.drag().on("drag", function(d,i) { d.x += d3.event.dx @@ -132,24 +141,8 @@ }); + // SVG縺ｮ霑ｽ蜉 var svg = d3.select("#graph").append("svg") .attr("width", width) .attr("height", height); - - var mc = new Array(); - for (var i=0; i
"; + var resultText = "

Selected Path

"; + for (var i = pathname.length;i > 0; i--){ + if(i % 2 == 1){ + resultText = resultText + "" + pathname[i - 1] + "

"; + }else{ + resultText = resultText + pathname[i - 1] + "

"; + } } document.getElementById("selectpath").innerHTML=(resultText); - document.getElementById("sendpath").style.display = "block"; + document.getElementById("showpath").style.display = "block"; + + var xPosition = parseFloat(d3.select(this).attr("cx")) + 22; + var yPosition = parseFloat(d3.select(this).attr("cy") - document.getElementById("showpath").offsetHeight + document.getElementById("menu").offsetHeight) + 22; + + if(xPosition < 0){ + xPosition = 0; + } + if(yPosition < 0){ + yPosition = 0; + } + + document.getElementById("showpath").style.left = xPosition + "px" + document.getElementById("showpath").style.top = yPosition + "px" + document.getElementById("showpath").style.display = "block"; + + tlink + .text(function(d) { + var linktext = ""; + for(var t = 0; t < path.length; t++){ + if(path[t] == d.target){ + linktext = d.property; + } + } + return linktext; + }) if (!d. isDrag){ @@ -261,18 +245,8 @@ d3.selectAll(".node").style("stroke", function(d) { return '#ffffff'; }); d3.select(this).style("stroke-width", function(d) { return 2; }); - d3.select(this).style("stroke", function(d) { return '#ff0000'; }); + d3.select(this).style("stroke", function(d) { return '#0000ff'; }); } -// ZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZN -// ZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZN - d.isDrag = false; - }); - - // 逕ｻ髱｢繧ｯ繝ｪ繝�け縺ｧ繝ｪ繝ｳ繧ｯ驕ｸ謚櫁ｧ｣髯､ - mapCircle.on("click", function(d){ - d3.selectAll(".node").style("stroke-width", function(d) { return '1.5px'; }); - d3.selectAll(".node").style("stroke", function(d) { return '#ffffff'; }); - d3.selectAll(".link").style("stroke-width", function(d) { return Math.sqrt(d.value); }); }); @@ -298,5 +272,5 @@ tlink .attr("x", function(d) {return (node.data()[d.source].x + node.data()[d.target].x) / 2;}) - .attr("y", function(d) {return (node.data()[d.source].y + node.data()[d.target].y) / 2;}); + .attr("y", function(d) {return ((node.data()[d.source].y + node.data()[d.target].y) / 2) + 5;}); node @@ -306,65 +280,27 @@ tnode .attr("x", function(d) {return d.x;}) - .attr("y", function(d) {return d.y;}); - - if (arrows['adr'] != undefined){ - arrows['adr'] - .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);}) - .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);}) - .attr("x2", function(d) {return node.data()[d.target].x;}) - .attr("y2", function(d) {return node.data()[d.target].y;}) - .attr("transform", function(d) { - return 'rotate(25, ' - + (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) + ', ' - + (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) + ')';}); - } - - if (arrows['adl'] != undefined){ - arrows['adl'] - .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);}) - .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);}) - .attr("x2", function(d) {return node.data()[d.target].x;}) - .attr("y2", function(d) {return node.data()[d.target].y;}) - .attr("transform", function(d) { - return 'rotate(-25, ' - + (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) + ', ' - + (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) + ')';}); - } - - if (arrows['asr'] != undefined){ - arrows['asr'] - .attr("x1", function(d) {return node.data()[d.source].x;}) - .attr("y1", function(d) {return node.data()[d.source].y;}) - .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);}) - .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);}) - .attr("transform", function(d) { - return 'rotate(25, ' - + (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) + ', ' - + (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) + ')';}); - } - - if (arrows['asl'] != undefined){ - arrows['asl'] - .attr("x1", function(d) {return node.data()[d.source].x;}) - .attr("y1", function(d) {return node.data()[d.source].y;}) - .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);}) - .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);}) - .attr("transform", function(d) { - return 'rotate(-25, ' - + (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) + ', ' - + (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) + ')';}); - } + .attr("y", function(d) { + var updown = 18; + if(d.group % 2 == 1){ + updown = -8; + } + return d.y + updown; + }); }; -/* - svg.on("mousemove", function() { - redraw(); + + svg.on("click", function() { + document.getElementById("showpath").style.display = "none"; + d3.selectAll(".node").style("stroke-width", function(d) { return '1.5px'; }); + d3.selectAll(".node").style("stroke", function(d) { return '#ffffff'; }); + tlink + .text(""); }); -*/ + redraw(); } -// 繝�せ繝医ョ繝ｼ繧ｿ縺ｮ菴懈�繝｡繧ｽ繝�ラ -function make_testdata(tdepth, ret, parent, depth){ - // ret縲‥epth縺梧悴螳夂ｾｩ縺ｪ繧峨�螳夂ｾｩ縺励※莉｣蜈･ +// 繝��繧ｿ縺ｮ菴懈�繝｡繧ｽ繝�ラ +function make_data(tdepth, ret, parent, depth){ + // ret縺梧悴螳夂ｾｩ縺ｪ繧峨�螳夂ｾｩ縺励※莉｣蜈･ if (ret == undefined){ ret = new Object(); @@ -372,32 +308,11 @@ ret['links'] = new Array(); } - /* - if (depth == undefined){ - depth = 0; - } - - // name縺ｫaaaa縲“roup縺ｫ豺ｱ縺輔€』縺ｨy縺ｫ蟷�→鬮倥＆縺ｮ蜊雁�繧偵そ繝�ヨ縺溶odes驟榊�縺ｫ霑ｽ蜉 - ret['nodes'].push({'name':'aaaa', 'group': depth, 'x':(WIDTH/2), 'y':(HEIGHT/2)}); - // 迴ｾ蝨ｨ縺ｮnodes縺ｮ謨ｰ縺ｫ蠢懊§縺櫑ndex繧堤函謌� - var newIndex = ret['nodes'].length-1; - - // parent縺梧悴螳夂ｾｩ縺ｧ縺ｪ縺代ｌ縺ｰlinks驟榊�縺ｫsource繧恥arent縲》arget繧地ewIndex縺ｨ螳夂ｾｩ縺励※莉｣蜈･ - if (parent != undefined){ - ret['links'].push({'source':parent, 'target':newIndex, 'value':5}); - } - - // 謖�ｮ壹＆繧後◆豺ｱ縺輔↓閾ｳ縺｣縺ｦ縺�↑縺代ｌ縺ｰ - if (tdepth > depth){ - // 繝ｩ繝ｳ繝€繝縺ｧ譛€螟ｧ蝗帙▽縺ｾ縺ｧ縺ｮ謨ｰ繧堤函謌舌€∝�蠎ｦ縺薙�繝｡繧ｽ繝�ラ繧貞他縺ｶ - // 縺薙％縺碁�ｬ｡蜻ｼ縺ｰ繧後※荳€谿ｵ縺ｮ豺ｱ縺輔＃縺ｨ縺ｫ譛€螟ｧ蝗帙▽縺ｮ蟄舌ｒ謖√▽繝ｩ繝ｳ繝€繝縺ｮ讒矩€縺後〒縺阪≠縺後ｋ - var c = Math.random()*4; - for (var i=0; i 0){ - ret = resource.substring(i + '/'.length); - } - ret = ret.replace(/%20/g, " "); - return ret; -} - -function get_item_index(item, label, group){ - for (var i=0; i -
-
-