Hybrid Publishing hybrid publication of the project Volitional Volutions of the Volatile Waters
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 

143 lines
3.8 KiB

var width = 500,
height = 380
var svg = d3.select(".map_area").append("svg")
.attr("width", width)
.attr("height", height)
.attr("viewBox", `${-width/2.5} ${-height/2.5} ${width*2.5} ${height*2.5}`);
var force = d3.layout.force()
.gravity(0.01)
.distance(300)
.charge(-50)
.size([width, height]);
d3.json("/static/js/group1.json", function(error, json) {
if (error) throw error;
force
.nodes(json.nodes)
.links(json.links)
.start();
var link = svg.selectAll(".link")
.data(json.links)
.enter().append("line")
.attr("class", "link");
var node = svg.selectAll(".node")
.data(json.nodes)
.enter().append("g")
.attr("class", "node ")
// .node()classList.add(function(d){return d.group});
.attr("id", function(d){return d.id})
// .style("fill",function (d) { return 'red'; })
// .on("click", function(d){
// scrolldiv(d);
// play(d);
// popup(d);
// })
.call(force.drag);
node.append("image")
.attr("xlink:href", "/static/images/squig2.png")
.attr("x", -8)
.attr("y", -8)
.attr("width", 16)
.attr("height", 16);
node.on({
"mouseover": function(d) {
d3.select(this).style("cursor", "pointer");
}});
node.append("text")
.attr("dx", 12)
.attr("dy", ".35em")
.text(function(d) { return d.name });
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 + ")"; });
// node.each(collide(0.5)); //Added
});
// no overlapping
//var padding = 10, // separation between circles
// radius=8;
//function collide(alpha) {
// var quadtree = d3.geom.quadtree(graph.nodes);
// return function(d) {
// var rb = 2*radius + padding,
// nx1 = d.x - rb,
// nx2 = d.x + rb,
// ny1 = d.y - rb,
// ny2 = d.y + rb;
// quadtree.visit(function(quad, x1, y1, x2, y2) {
// if (quad.point && (quad.point !== d)) {
// var x = d.x - quad.point.x,
// y = d.y - quad.point.y,
// l = Math.sqrt(x * x + y * y);
// if (l < rb) {
// l = (l - rb) / l * alpha;
// d.x -= x *= l;
// d.y -= y *= l;
// quad.point.x += x;
// quad.point.y += y;
// }
// }
// return x1 > nx2 || x2 < nx1 || y1 > ny2 || y2 < ny1;
// });
// };
//}
// scripts for mouse events
$("#dadaloglu").click(function(){
$("#showdadaloglu").fadeIn()
console.log("around")
var dada = document.getElementById("textdadaloglu");
dada.className += " active";
dada.scrollIntoView();
var audio1 = document.getElementById("audio-1");
audio1.currentTime = 12;
// audio1.play();
});
$("#asikA").click(function(){$("#showasikA").fadeIn()
console.log("around")
var muh = document.getElementById("textasikA");
muh.className += " active";
muh.scrollIntoView();
var audio2 = document.getElementById("audio-1");
audio2.currentTime = 50;
// audio2.play();
});
//pop-up
$(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 textmuh = document.getElementById("textasikA");
textmuh.classList.remove("active");
};
});
});