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.
158 lines
4.1 KiB
158 lines
4.1 KiB
var width = 500,
|
|
height = 350
|
|
|
|
var svg = d3.select(".map_area").append("svg")
|
|
.attr("width", width)
|
|
.attr("height", height)
|
|
.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]);
|
|
|
|
|
|
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();
|
|
};
|
|
|
|
|
|
//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");
|
|
// };
|
|
// });
|
|
// };
|
|
|
|
//
|
|
//
|
|
|