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"); }; }); });