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.8} ${width*2.3} ${height*2.2}`); var force = d3.layout.force() .gravity(0.008) .distance(180) .charge(-35) .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/circle_blank.png") .attr("x", -8) .attr("y", -8) .attr("width", 16) .attr("height", 16); node.append("text") .attr("dx", 12) .attr("dy", ".35em") .text(function(d) { return d.name }); 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 // this is for next the this.parent... ;var video=document.getElementById('#video" + i.id + "');video.pause(); console.log('vid') if (i.url) { divVideo.transition().duration(100); divVideo.html("
  × 
"); }; divBio.transition().duration(100); divBio.html("
  × 
" + i.bio + "
"); popup(i.id, i.time); }) .on("dblclick", connectedNodes) .call(force.drag); 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 + ")"; }); }); // 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 function popup(name, time) { $("#show" + name).fadeIn() console.log("around") $("#nothesis").fadeIn() $("#thesis").fadeIn() $("#bio" + name).fadeIn() var dada = document.getElementById("text" + name); dada.className += " active"; dada.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'nearest' }); }; });