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.

159 lines
4.1 KiB

var width = 500,
4 years ago
height = 350
var svg = d3.select(".map_area").append("svg")
.attr("width", width)
.attr("height", height)
4 years ago
.attr("viewBox", `${-width/3.1} ${-height/2.3} ${width*2.5} ${height*2.5}`);
var force = d3.layout.force()
.gravity(0.009)
.distance(250)
.charge(-30)
.size([width, height]);
4 years ago
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 ")
.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);
})
.call(force.drag);
d3.select("body").on("click",function(i){
stop(i.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 });
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
// 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
function popup(name,time) {
$("#show"+name).fadeIn()
console.log("around")
var dada = document.getElementById("text"+name);
dada.className += " active";
dada.scrollIntoView();
var audio1 = document.getElementById("audioBG");
audio1.currentTime = time;
audio1.play();
};
4 years ago
//stop events when clicking somewhere else
$(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");
};
if (!$(e.target).parents().andSelf().is('#asikV')) {
$("#showasikV").fadeOut();
$("#audioasikV").trigger('pause');
var textmuh = document.getElementById("textasikV");
textmuh.classList.remove("active");
};
});
});
// function stop(name) {
// $(document).click(function (e) {
// if (!$(e.target).parents().andSelf().is('#'+ name)) {
// $("#show"+name).fadeOut();
// $("#audio"+name).trigger('pause');
// var textdada = document.getElementById("text"+name);
// textdada.classList.remove("active");
// };
// });
// };
//
//