|
|
|
@ -8,7 +8,7 @@ var svg = d3.select(".map_area").append("svg") |
|
|
|
|
|
|
|
var force = d3.layout.force() |
|
|
|
.gravity(0.009) |
|
|
|
.distance(400) |
|
|
|
.distance(500) |
|
|
|
.charge(-30) |
|
|
|
.size([width, height]); |
|
|
|
|
|
|
|
@ -26,22 +26,70 @@ d3.json("/static/js/group1.json", function(error, json) { |
|
|
|
.enter().append("line") |
|
|
|
.attr("class", "link"); |
|
|
|
|
|
|
|
var div = d3.select("body").append("div").style("opacity", 0); |
|
|
|
|
|
|
|
var node = svg.selectAll(".node") |
|
|
|
.data(json.nodes) |
|
|
|
.enter().append("g") |
|
|
|
.attr("class", "node ") |
|
|
|
.attr("class", function(d){return "node group" + d.group}) |
|
|
|
.attr("id", function(d){return d.id}) |
|
|
|
.on("click", function(i){ |
|
|
|
popup(i.id,i.time); |
|
|
|
// popup video
|
|
|
|
div.transition().duration(100).style("opacity", 1); |
|
|
|
div.html("<div class='draggable' class='show' id='show"+i.id+"'><div class='text_audio'>"+i.bio+"</div><iframe width='300' height='150' src='"+i.url+"' frameborder='0' allow='accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture' allowfullscreen></iframe>") |
|
|
|
}) |
|
|
|
.on("dblclick",connectedNodes)// Added code
|
|
|
|
.call(force.drag); |
|
|
|
.attr("id", function(d){return d.id}); |
|
|
|
|
|
|
|
node.append("image") |
|
|
|
// .attr("xlink:href", "/static/images/squig2.png")
|
|
|
|
.attr("xlink:href", "/static/images/circleB.png") |
|
|
|
.attr("x", -8) |
|
|
|
.attr("y", -8) |
|
|
|
.attr("width", 16) |
|
|
|
.attr("height", 16); |
|
|
|
|
|
|
|
node.append("text") |
|
|
|
// .attr("xlink:href", "#")
|
|
|
|
.attr("dx", 12) |
|
|
|
.attr("dy", ".35em") |
|
|
|
.text(function(d) { return d.name }); |
|
|
|
|
|
|
|
// let drag = d3.behavior.drag();
|
|
|
|
// var drag = d3.behavior.drag()
|
|
|
|
// .on("drag", function() {
|
|
|
|
// var x = d3.event.x;
|
|
|
|
// var y = d3.event.y;
|
|
|
|
// d3.select(this).attr("transform", "translate(" + x + "," + y + ")");
|
|
|
|
// });
|
|
|
|
|
|
|
|
var divVideo = d3.select("body").append("div").style("opacity", 1); |
|
|
|
var divBio = d3.select("body").append("div").style("opacity", 1); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
node.on({ |
|
|
|
"mouseover": function(d) { |
|
|
|
d3.select(this).style("cursor", "pointer"); |
|
|
|
}}) |
|
|
|
.on("click", function(i){ |
|
|
|
// popup video
|
|
|
|
divVideo.transition().duration(100); |
|
|
|
divVideo.html("<div id='showvideo'><span onclick=this.parentElement.style.display='none';stopVideo("+i.id+"); class='topleft'> × </span><iframe width='300' height='150' src='"+i.url+"' frameborder='0' allow='accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture' allowfullscreen></iframe></div>"); |
|
|
|
divBio.transition().duration(100); |
|
|
|
divBio.html("<div id='showbio'><span onclick=this.parentElement.style.display='none' class='topleft'> × </span><div id='bio"+i.id+"'>"+i.bio+"</div>"); |
|
|
|
// div.on(".drag", null);
|
|
|
|
// span.html("<span onclick='this.parentElement.style.display='none'' class='topleft'>×</span>");
|
|
|
|
// rest pop up
|
|
|
|
popup(i.id,i.time); |
|
|
|
}) |
|
|
|
.on("dblclick",connectedNodes); |
|
|
|
|
|
|
|
|
|
|
|
force.on("tick", function() { |
|
|
|
link.attr("x1", function(d) { return d.source.x; }) |
|
|
|
.attr("y1", function(d) { return d.source.y; }) |
|
|
|
.attr("x2", function(d) { return d.target.x; }) |
|
|
|
.attr("y2", function(d) { return d.target.y; }); |
|
|
|
|
|
|
|
node.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; }); |
|
|
|
|
|
|
|
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// under construction
|
|
|
|
@ -85,36 +133,8 @@ function connectedNodes() { |
|
|
|
//end highlight nodes
|
|
|
|
|
|
|
|
|
|
|
|
node.append("image") |
|
|
|
// .attr("xlink:href", "/static/images/squig2.png")
|
|
|
|
.attr("xlink:href", "/static/images/circleB.png") |
|
|
|
.attr("x", -8) |
|
|
|
.attr("y", -8) |
|
|
|
.attr("width", 16) |
|
|
|
.attr("height", 16); |
|
|
|
|
|
|
|
node.append("text") |
|
|
|
// .attr("xlink:href", "#")
|
|
|
|
.attr("dx", 12) |
|
|
|
.attr("dy", ".35em") |
|
|
|
.text(function(d) { return d.name }); |
|
|
|
|
|
|
|
node.on({ |
|
|
|
"mouseover": function(d) { |
|
|
|
d3.select(this).style("cursor", "pointer"); |
|
|
|
}}); |
|
|
|
|
|
|
|
force.on("tick", function() { |
|
|
|
link.attr("x1", function(d) { return d.source.x; }) |
|
|
|
.attr("y1", function(d) { return d.source.y; }) |
|
|
|
.attr("x2", function(d) { return d.target.x; }) |
|
|
|
.attr("y2", function(d) { return d.target.y; }); |
|
|
|
|
|
|
|
node.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; }); |
|
|
|
|
|
|
|
|
|
|
|
}); |
|
|
|
|
|
|
|
// no overlapping
|
|
|
|
|
|
|
|
//var padding = 10, // separation between circles
|
|
|
|
@ -146,7 +166,8 @@ function connectedNodes() { |
|
|
|
//}
|
|
|
|
|
|
|
|
// scripts for mouse events
|
|
|
|
var stopVideo = function (name) { |
|
|
|
// var stopVideo = function (name) {
|
|
|
|
function stopVideo(name) { |
|
|
|
var iframe = document.querySelector( 'iframe'); |
|
|
|
var video = document.getElementById( "#video"+name ); |
|
|
|
if ( iframe !== null ) { |
|
|
|
@ -162,10 +183,11 @@ var stopVideo = function (name) { |
|
|
|
function popup(name,time) { |
|
|
|
$("#show"+name).fadeIn() |
|
|
|
console.log("around") |
|
|
|
$("#showthesis").fadeIn() |
|
|
|
// var dada = document.getElementById("text"+name);
|
|
|
|
// dada.className += " active";
|
|
|
|
// dada.scrollIntoView();
|
|
|
|
$("#thesis").fadeIn() |
|
|
|
$("#bio"+name).fadeIn() |
|
|
|
var dada = document.getElementById("text"+name); |
|
|
|
dada.className += " active"; |
|
|
|
dada.scrollIntoView(); |
|
|
|
// var audio1 = document.getElementById("audioBG");
|
|
|
|
// audio1.currentTime = time;
|
|
|
|
// audio1.play();
|
|
|
|
@ -189,15 +211,26 @@ function popup(name,time) { |
|
|
|
stopVideo("#asikA"); |
|
|
|
}; |
|
|
|
|
|
|
|
}); |
|
|
|
|
|
|
|
// $(document).click(function (e) {
|
|
|
|
// if (!$(e.target).parents().andSelf().is('#dadaloglu')) {
|
|
|
|
// $("#showdadaloglu").fadeOut();
|
|
|
|
// $("#audiodadaloglu").trigger('pause');
|
|
|
|
// // var textdada = document.getElementById("textdadaloglu");
|
|
|
|
// // textdada.classList.remove("active");
|
|
|
|
// };
|
|
|
|
// if (!$(e.target).parents().andSelf().is('#asikA')) {
|
|
|
|
// $("#showasikA").fadeOut();
|
|
|
|
// $("#audioasikA").trigger('pause');
|
|
|
|
// // var textasikA = document.getElementById("textasikA");
|
|
|
|
// // textasikA.classList.remove("active");
|
|
|
|
// stopVideo("#asikA");
|
|
|
|
// };
|
|
|
|
//
|
|
|
|
// });
|
|
|
|
|
|
|
|
// if (!$(e.target).parents().andSelf().is('#asikV')) {
|
|
|
|
// $("#showasikV").fadeOut();
|
|
|
|
// $("#audioasikV").trigger('pause');
|
|
|
|
// var textmuh = document.getElementById("textasikV");
|
|
|
|
// textmuh.classList.remove("active");
|
|
|
|
// };
|
|
|
|
|
|
|
|
}); |
|
|
|
|
|
|
|
}); |
|
|
|
|
|
|
|
|
