var width = 700, height = 350 var svg = d3.select(".map_area").append("svg") .attr("width", width) .attr("height", height) .attr("viewBox", `${-width/1.7} ${-height/1.6} ${width*2.3} ${height*2.2}`); var force = d3.layout.force() .gravity(0.009) .distance(500) .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", function(d){return "node group" + d.group}) .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("
  × 
"); divBio.transition().duration(100); divBio.html("
  × 
"+i.bio+"
"); // div.on(".drag", null); // span.html("×"); // 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 // d3.select("body").on("click",function(i){ // stop(i.id); // }); // highlight NodeLists//Toggle stores whether the highlighting is on var toggle = 0; //Create an array logging what is connected to what var linkedByIndex = {}; for (i = 0; i < json.nodes.length; i++) { linkedByIndex[i + "," + i] = 1; }; json.links.forEach(function (d) { linkedByIndex[d.source.index + "," + d.target.index] = 1; }); //This function looks up whether a pair are neighbours function neighboring(a, b) { return linkedByIndex[a.index + "," + b.index]; } function connectedNodes() { if (toggle == 0) { //Reduce the opacity of all but the neighbouring nodes d = d3.select(this).node().__data__; node.style("opacity", function (o) { return neighboring(d, o) | neighboring(o, d) ? 1 : 0.1; }); link.style("opacity", function (o) { return d.index==o.source.index | d.index==o.target.index ? 1 : 0.1; }); //Reduce the op toggle = 1; } else { //Put them back to opacity=1 node.style("opacity", 1); link.style("opacity", 1); toggle = 0; } } //end highlight nodes // no overlapping //var padding = 10, // separation between circles // radius=8; //function collide(alpha) { // var quadtree = d3.geom.quadtree(<.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 // var stopVideo = function (name) { function stopVideo(name) { var iframe = document.querySelector( 'iframe'); var video = document.getElementById( "#video"+name ); if ( iframe !== null ) { var iframeSrc = iframe.src; iframe.src = iframeSrc; } if ( video !== null ) { video.pause(); } }; function popup(name,time) { $("#show"+name).fadeIn() console.log("around") $("#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(); }; //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 textasikA = document.getElementById("textasikA"); // textasikA.classList.remove("active"); 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"); // }; // // }); }); // 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"); // }; // }); // }; // //