チェンジセット 117 : BH13SPARQLBuilder/src/hozo/maptool
- 更新日時:
- 2014/07/07 16:52:51 (10 年 前)
- ファイル:
-
- 1 変更
凡例:
- 変更なし
- 追加
- 削除
-
BH13SPARQLBuilder/src/hozo/maptool/jsgui.html
r116 r117 20 20 width: 200px; 21 21 height: auto; 22 padding: 1 0px;22 padding: 15px; 23 23 -webkit-border-radius: 20px; 24 24 border-radius: 20px; … … 70 70 var DRAWHEIGHT = 0; 71 71 var NODEHEIGHT = 50; 72 var MOUSEMOVED = 0; 72 73 var jsontext = ""; 73 74 75 // 髢九＞縺溘ｉview_map繝｡繧ｽ繝�ラ繧貞他縺ｶ 74 var DURATION = 0; 75 76 77 // 髢九＞縺溘ｉ蜷�ｨｮ繧､繝ｳ繧ｿ繝ｼ繝輔ぉ繝ｼ繧ｹ驛ｨ蜩√�繧ｵ繧､繧ｺ繧貞､画峩縲√お繝ｳ繝峨�繧､繝ｳ繝井ｸ隕ｧ繧貞叙蠕励＠繧ｻ繝�ヨ 76 78 $(window).load(function() { 77 78 // ZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZN79 // ZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZN80 79 81 80 var menuwidth = window.innerWidth + "px"; … … 102 101 }); 103 102 104 // ZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZN105 // ZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZN106 107 103 }); 108 104 … … 118 114 set_map_location(0, json['nodes'], json['links']); 119 115 116 // SVG縺ｮ蟷�→鬮倥＆繧定ｨｭ螳夲ｼ亥ｹ�ｼ夂判髱｢縺�▲縺ｱ縺�鬮倥＆�壹ヱ繧ｹ縺ｮ謨ｰ縺ｫ蠢懊§險ｭ螳夲ｼ� 120 117 var width = window.innerWidth; 121 var height = ((NODEHEIGHT * 1.5) * PATHNUM) + NODEHEIGHT;118 var height = ((NODEHEIGHT * 1.5) * PATHNUM) + (NODEHEIGHT / 2); 122 119 123 120 // 繧ｫ繝ｩ繝ｼ繧貞叙蠕� … … 128 125 d3.select("#graph").select("svg").remove(); 129 126 } 127 DURATION = 0; 130 128 131 129 // 繝峨Λ繝�げ譎ゅ�蜃ｦ逅� … … 135 133 136 134 d. isDrag = true; 135 DURATION = 0; 137 136 redraw(); 138 137 }); … … 142 141 .attr("width", width) 143 142 .attr("height", height); 144 /* 145 var bg = d3.select(".background")146 .enter()143 144 // 閭梧勹縺ｮ霑ｽ蜉 145 var bg = svg 147 146 .append("rect") 148 147 .attr("x", 0) … … 150 149 .attr("width", width) 151 150 .attr("height", height) 152 .attr("fill", #999999); 153 */ 151 .attr("fill", "#fafafa"); 152 153 // 繝ｪ繝ｳ繧ｯ縺ｮ菴懈� 154 154 var link = svg.selectAll(".link") 155 155 .data(json.links) … … 158 158 .style("stroke-width", function(d) { return Math.sqrt(d.value); }); 159 159 160 // 繝弱�繝峨�菴懈� 160 161 var node = svg.selectAll(".node") 161 162 .data(json.nodes) … … 165 166 .attr("cx", function(d) { return d.x;} ) 166 167 .attr("cy", function(d) { return d.y; }) 167 .style("stroke", function(d) { return '#f fffff'; })168 .style("stroke", function(d) { return '#fafafa'; }) 168 169 .style("stroke-width", function(d) { return '1.5px'; }) 169 170 .style("fill", function(d) { return color(d.group); }) … … 171 172 .call(drag); 172 173 174 // 繝弱�繝峨ユ繧ｭ繧ｹ繝医�菴懈� 173 175 var tnode = svg.selectAll("text.node") 174 176 .data(json.nodes) … … 185 187 .call(drag); 186 188 189 // 繝ｪ繝ｳ繧ｯ繝�く繧ｹ繝医�菴懈� 187 190 var tlink = svg.selectAll("text.link") 188 191 .data(json.links) … … 191 194 .attr("x", function(d) { return (json.nodes[d.source].x + json.nodes[d.target].x) / 2; }) 192 195 .attr("y", function(d) { return (json.nodes[d.source].y + json.nodes[d.target].y) / 2; }) 193 //.text(function(d) { return d.property; })194 196 .style("fill", function(d) { return '#000000'; }) 195 197 .style("text-anchor", function(d) { return 'middle'; }); 196 198 197 // 繝弱�繝峨∈縺ｮ繧 ｪ繝ｳ繝槭え繧ｹ縺ｧ繝代せ謗｢邏｢199 // 繝弱�繝峨∈縺ｮ繧ｯ繝ｪ繝�け縺ｧ繝代せ謗｢邏｢縲√ヱ繧ｹ荳ｭ縺ｮ繝ｪ繝ｳ繧ｯ譁�ｭ励ｒ陦ｨ遉ｺ 198 200 node.on("mouseover", function(d){ 199 201 200 if (!d. isDrag){ 201 d3.selectAll(".node").style("stroke-width", function(d) { return '1.5px'; }); 202 d3.selectAll(".node").style("stroke", function(d) { return '#ffffff'; }); 203 d3.select(this).style("stroke-width", function(d) { return 2; }); 204 d3.select(this).style("stroke", function(d) { return '#0000ff'; }); 205 } 206 207 d.isDrag = false; 208 209 var path = []; 210 pathname = []; 211 212 if(d.nodeid != 0){ 213 path.push(d.nodeid); 214 pathname.push(d.name); 215 do{ 216 for(var i = 0; i < link.data().length; i++){ 217 if(path[(path.length-1)] == link.data()[i].target){ 218 path.push(link.data()[i].source); 219 pathname.push(link.data()[i].property); 220 pathname.push(node.data()[link.data()[i].source].name); 202 MOUSEMOVED = 0; 203 204 if(!d.isDrag){ 205 206 var path = []; 207 pathname = []; 208 209 if(d.nodeid != 0){ 210 path.push(d.nodeid); 211 pathname.push(d.name); 212 do{ 213 for(var i = 0; i < link.data().length; i++){ 214 if(path[(path.length-1)] == link.data()[i].target){ 215 path.push(link.data()[i].source); 216 pathname.push(link.data()[i].property); 217 pathname.push(node.data()[link.data()[i].source].name); 218 } 221 219 } 222 } 223 }while(path[(path.length-1)] != 0); 224 var resultText = "<h3>Selected Path</h3>"; 225 for (var i = pathname.length;i > 0; i--){ 226 if(i % 2 == 1){ 227 resultText = resultText + "<span style=\"font-weight: bold;\">" + pathname[i - 1] + "</span><br><br>"; 220 }while(path[(path.length-1)] != 0); 221 var resultText = "<h3>Selected Path</h3>"; 222 for (var i = pathname.length;i > 0; i--){ 223 if(i % 2 == 1){ 224 resultText = resultText + "<span style=\"font-weight: bold;\">" + pathname[i - 1] + "</span><br><br>"; 225 }else{ 226 resultText = resultText + pathname[i - 1] + "<br><br>"; 227 } 228 } 229 230 document.getElementById("selectpath").innerHTML=(resultText); 231 document.getElementById("showpath").style.display = "block"; 232 233 if(d.group > (MAXDEPTH - 2)){ 234 document.getElementById("getsparqlbutton").style.display = "block"; 228 235 }else{ 229 resultText = resultText + pathname[i - 1] + "<br><br>"; 230 } 236 document.getElementById("getsparqlbutton").style.display = "none"; 237 } 238 239 var xPosition = parseFloat(d3.select(this).attr("cx")) + parseFloat(d3.select(this).style("stroke-width")) + (NODEHEIGHT * 0.5); 240 var yPosition = parseFloat(d3.select(this).attr("cy") - document.getElementById("showpath").offsetHeight + document.getElementById("menu").offsetHeight) + (NODEHEIGHT * 0.5); 241 242 if(xPosition < 0){ 243 xPosition = 0; 244 } 245 if(yPosition < 0){ 246 yPosition = 0; 247 } 248 249 document.getElementById("showpath").style.left = xPosition + "px" 250 document.getElementById("showpath").style.top = yPosition + "px" 251 document.getElementById("showpath").style.display = "block"; 252 253 }else{ 254 document.getElementById("showpath").style.display = "none"; 231 255 } 232 256 233 document.getElementById("selectpath").innerHTML=(resultText); 234 document.getElementById("showpath").style.display = "block"; 235 236 if(d.group > (MAXDEPTH - 2)){ 237 document.getElementById("getsparqlbutton").style.display = "block"; 238 }else{ 239 document.getElementById("getsparqlbutton").style.display = "none"; 257 var movey = d.y; 258 259 node 260 .style("stroke", function(d){ 261 var strokecolor = "#fafafa"; 262 if(d.view == "now"){ 263 d.view = "no"; 264 } 265 if(d.view == "moved"){ 266 d.view = "clicked"; 267 } 268 269 if(d.view == "no"){ 270 for(var n = 0; n < path.length; n++){ 271 if(path[n] == d.nodeid){ 272 strokecolor = "#ffaaaa"; 273 d.view = "now"; 274 } 275 } 276 }else if(d.view == "clicked"){ 277 strokecolor = "#ffaaaa"; 278 for(var n = 0; n < path.length; n++){ 279 if(path[n] == d.nodeid){ 280 d.view = "moved"; 281 } 282 } 283 } 284 285 return strokecolor; 286 }) 287 .attr("cy", function(d){ 288 if(d.view == "now" || d.view == "moved"){ 289 var curty = d.y; 290 d.y = movey; 291 return curty; 292 }else{ 293 return d.y; 294 } 295 }); 296 297 tlink 298 .text(function(d) { 299 var linktext = ""; 300 if(d.view == "now"){ 301 d.view = "no"; 302 } 303 304 if(d.view == "no"){ 305 for(var t = 0; t < path.length; t++){ 306 if(path[t] == d.target){ 307 linktext = d.property; 308 d.view = "now"; 309 } 310 } 311 }else if(d.view == "fix"){ 312 linktext = d.property; 313 } 314 return linktext; 315 }); 316 317 link 318 .style("stroke", function(d){ 319 if(d.view == "no"){ 320 return "#999"; 321 }else{ 322 return "#ffaaaa"; 323 } 324 }); 325 326 redraw(); 327 } 328 329 }).on("click", function(d){ 330 331 node 332 .style("stroke", function(d) { 333 var strokecolor = "#fafafa" 334 if(d.view == "now" || d.view == "clicked" || d.view == "moved"){ 335 strokecolor = "#ffaaaa" 336 d.view = "clicked"; 240 337 } 241 242 var xPosition = parseFloat(d3.select(this).attr("cx")) + parseFloat(d3.select(this).style("stroke-width")) + (NODEHEIGHT * 0.5); 243 var yPosition = parseFloat(d3.select(this).attr("cy") - document.getElementById("showpath").offsetHeight + document.getElementById("menu").offsetHeight) + (NODEHEIGHT * 0.5); 244 245 if(xPosition < 0){ 246 xPosition = 0; 247 } 248 if(yPosition < 0){ 249 yPosition = 0; 250 } 251 252 document.getElementById("showpath").style.left = xPosition + "px" 253 document.getElementById("showpath").style.top = yPosition + "px" 254 document.getElementById("showpath").style.display = "block"; 255 256 }else{ 257 document.getElementById("showpath").style.display = "none"; 258 } 338 return strokecolor; 339 }); 259 340 260 341 tlink 261 342 .text(function(d) { 262 343 var linktext = ""; 263 for(var t = 0; t < path.length; t++){ 264 if(path[t] == d.target){ 265 linktext = d.property; 266 } 344 if(d.view == "now" || d.view == "fix"){ 345 linktext = d.property; 346 d.view = "fix"; 267 347 } 268 348 return linktext; 269 }) 270 349 }); 350 351 }).on("mouseout", function(d){ 352 d.isDrag = false; 271 353 }); 272 354 … … 285 367 var redraw = function (){ 286 368 link 369 .transition() 370 .duration(DURATION) 287 371 .attr("x1", function(d) {return node.data()[d.source].x;}) 288 372 .attr("y1", function(d) {return node.data()[d.source].y;}) … … 291 375 292 376 tlink 377 .transition() 378 .duration(DURATION) 293 379 .attr("x", function(d) {return (node.data()[d.source].x + node.data()[d.target].x) / 2;}) 294 380 .attr("y", function(d) {return ((node.data()[d.source].y + node.data()[d.target].y) / 2) + 5;}); 295 381 296 382 node 383 .transition() 384 .duration(DURATION) 297 385 .attr("cx", function(d) {return d.x;}) 298 386 .attr("cy", function(d) {return d.y;}); 299 387 300 388 tnode 389 .transition() 390 .duration(DURATION) 301 391 .attr("x", function(d) {return d.x;}) 302 392 .attr("y", function(d) { … … 307 397 return d.y + updown; 308 398 }); 399 400 DURATION = 500; 309 401 }; 310 402 311 svg.on("click", function() {403 bg.on("click", function() { 312 404 document.getElementById("showpath").style.display = "none"; 313 405 d3.selectAll(".node").style("stroke-width", function(d) { return '1.5px'; }); 314 406 d3.selectAll(".node").style("stroke", function(d) { return '#ffffff'; }); 407 408 node 409 .style("stroke", function(d){ 410 d.view = "no"; 411 return "#fafafa"; 412 }); 413 315 414 tlink 316 .text(""); 415 .text(function(d) { 416 d.view = "no"; 417 return ""; 418 }); 419 420 link 421 .style("stroke", function(d){ 422 return "#999"; 423 }); 424 425 }); 426 427 bg.on("mousemove", function(){ 428 MOUSEMOVED++; 429 if(MOUSEMOVED > 30){ 430 document.getElementById("showpath").style.display = "none"; 431 MOUSEMOVED = 0; 432 } 317 433 }); 318 434 … … 339 455 if(i == 0){ 340 456 // 蛻晏屓縺縺代Ν繝ｼ繝医ヮ繝ｼ繝峨ｒ繝励ャ繧ｷ繝･ 341 ret['nodes'].push({'name':obj['paths'][0]['startClassURI'], 'group': 0, 'x':50, 'y':50, 'nodeid':ret['nodes'].length });457 ret['nodes'].push({'name':obj['paths'][0]['startClassURI'], 'group': 0, 'x':50, 'y':50, 'nodeid':ret['nodes'].length, 'view' : 'no'}); 342 458 } 343 459 // 蜈医↓source縺ｫ0�医Ν繝ｼ繝茨ｼ峨ｒ莉｣蜈･ … … 383 499 if(!isCommonNow){ 384 500 isCommon = false; 385 ret['nodes'].push({'name':obj['paths'][i]['classLinks'][j]['linkedClassURI'], 'group': (j+1), 'x':0, 'y':0, 'nodeid':ret['nodes'].length });386 ret['links'].push({'source':source, 'target':ret['nodes'].length - 1, 'value':5, 'property':obj['paths'][i]['classLinks'][j]['propertyURI'] });501 ret['nodes'].push({'name':obj['paths'][i]['classLinks'][j]['linkedClassURI'], 'group': (j+1), 'x':0, 'y':0, 'nodeid':ret['nodes'].length, 'view' : 'no'}); 502 ret['links'].push({'source':source, 'target':ret['nodes'].length - 1, 'value':5, 'property':obj['paths'][i]['classLinks'][j]['propertyURI'], 'view' : 'no'}); 387 503 source = ret['nodes'].length - 1; 388 504 } … … 392 508 393 509 isCommon = false; 394 ret['nodes'].push({'name':obj['paths'][i]['classLinks'][j]['linkedClassURI'], 'group': (j+1), 'x':0, 'y':0, 'nodeid':ret['nodes'].length });395 ret['links'].push({'source':source, 'target':ret['nodes'].length - 1, 'value':5, 'property':obj['paths'][i]['classLinks'][j]['propertyURI'] });510 ret['nodes'].push({'name':obj['paths'][i]['classLinks'][j]['linkedClassURI'], 'group': (j+1), 'x':0, 'y':0, 'nodeid':ret['nodes'].length, 'view' : 'no'}); 511 ret['links'].push({'source':source, 'target':ret['nodes'].length - 1, 'value':5, 'property':obj['paths'][i]['classLinks'][j]['propertyURI'], 'view' : 'no'}); 396 512 source = ret['nodes'].length - 1; 397 513 } 398 514 // 譌｢縺ｫ蜈ｱ騾壹Ν繝ｼ繝医〒縺ｪ縺�↑繧画眠隕剰ｿｽ蜉縺励※谺｡縺ｸ 399 515 }else{ 400 ret['nodes'].push({'name':obj['paths'][i]['classLinks'][j]['linkedClassURI'], 'group': (j+1), 'x':0, 'y':0, 'nodeid':ret['nodes'].length });401 ret['links'].push({'source':source, 'target':ret['nodes'].length - 1, 'value':5, 'property':obj['paths'][i]['classLinks'][j]['propertyURI'] });516 ret['nodes'].push({'name':obj['paths'][i]['classLinks'][j]['linkedClassURI'], 'group': (j+1), 'x':0, 'y':0, 'nodeid':ret['nodes'].length, 'view' : 'no'}); 517 ret['links'].push({'source':source, 'target':ret['nodes'].length - 1, 'value':5, 'property':obj['paths'][i]['classLinks'][j]['propertyURI'], 'view' : 'no'}); 402 518 source = ret['nodes'].length - 1; 403 519 } … … 516 632 if(sel == "input"){ 517 633 sel = $("*[name=inputendpoint]").val(); 518 alert(sel);519 634 } 520 635 … … 594 709 } 595 710 711 function sendSPARQL(){ 712 var ep = $("*[name=selectendpoint]").val(); 713 714 if(ep == "input"){ 715 ep = $("*[name=inputendpoint]").val(); 716 } 717 718 var query = $("*[name=sparql]").val(); 719 720 query = encodeURI(query); 721 722 openpage = ep + "sparql?format=text%2Fhtml&query=" + query; 723 724 window.open(openpage); 725 } 726 596 727 // ZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZN 597 728 // ZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZN … … 603 734 <body> 604 735 605 <div id="menu" style="position: absolute; overflow:hidden; top:0px; left:0px; width: 1000px; background-color: # cccccc;">736 <div id="menu" style="position: absolute; overflow:hidden; top:0px; left:0px; width: 1000px; background-color: #eeeeee;"> 606 737 607 738 <div id="setting" style="margin: 15px; float: left;">
