alicestrt 4 years ago
parent
commit
b975a876ef
  1. 38
      static/js/d3_map.js

38
static/js/d3_map.js

@ -30,8 +30,12 @@ d3.json("/static/js/group1.json", function(error, json) {
var node = svg.selectAll(".node") var node = svg.selectAll(".node")
.data(json.nodes) .data(json.nodes)
.enter().append("g") .enter().append("g")
.attr("class", function(d){return "node group" + d.group}) .attr("class", function(d) {
.attr("id", function(d){return d.id}); return "node group" + d.group
})
.attr("id", function(d) {
return d.id
});
node.append("image") node.append("image")
// .attr("xlink:href", "/static/images/squig2.png") // .attr("xlink:href", "/static/images/squig2.png")
@ -45,7 +49,9 @@ d3.json("/static/js/group1.json", function(error, json) {
// .attr("xlink:href", "#") // .attr("xlink:href", "#")
.attr("dx", 12) .attr("dx", 12)
.attr("dy", ".35em") .attr("dy", ".35em")
.text(function(d) { return d.name }); .text(function(d) {
return d.name
});
var divVideo = d3.select("body").append("div").style("opacity", 1); var divVideo = d3.select("body").append("div").style("opacity", 1);
@ -56,11 +62,14 @@ var divBio = d3.select("body").append("div").style("opacity", 1);
node.on({ node.on({
"mouseover": function(d) { "mouseover": function(d) {
d3.select(this).style("cursor", "pointer"); d3.select(this).style("cursor", "pointer");
}}) }
})
.on("click", function(i) { .on("click", function(i) {
// popup video // popup video
if (i.url) {
divVideo.transition().duration(100); divVideo.transition().duration(100);
divVideo.html("<div id='showvideo'><span onclick=this.parentElement.style.display='none';pauseAllVideos(" + i.id + "); class='topleft'> &nbsp; &times&nbsp;</span><iframe id='video" + i.id + "' width='300' height='150' src='" + i.url + "' frameborder='0' allow='accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture' allowfullscreen></iframe></div>"); divVideo.html("<div id='showvideo'><span onclick=this.parentElement.style.display='none';pauseAllVideos(" + i.id + "); class='topleft'> &nbsp; &times&nbsp;</span><iframe id='video" + i.id + "' width='300' height='150' src='" + i.url + "' frameborder='0' allow='accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture' allowfullscreen></iframe></div>");
}
divBio.transition().duration(100); divBio.transition().duration(100);
divBio.html("<div id='showbio'><span onclick=this.parentElement.style.display='none' class='topleft'> &nbsp; &times&nbsp;</span><div id='bio" + i.id + "'>" + i.bio + "</div>"); divBio.html("<div id='showbio'><span onclick=this.parentElement.style.display='none' class='topleft'> &nbsp; &times&nbsp;</span><div id='bio" + i.id + "'>" + i.bio + "</div>");
// draggable // draggable
@ -77,12 +86,22 @@ var divBio = d3.select("body").append("div").style("opacity", 1);
force.on("tick", function() { force.on("tick", function() {
link.attr("x1", function(d) { return d.source.x; }) link.attr("x1", function(d) {
.attr("y1", function(d) { return d.source.y; }) return d.source.x;
.attr("x2", function(d) { return d.target.x; }) })
.attr("y2", function(d) { return d.target.y; }); .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.attr("transform", function(d) {
return "translate(" + d.x + "," + d.y + ")";
});
}); });
@ -108,6 +127,7 @@ json.links.forEach(function (d) {
function neighboring(a, b) { function neighboring(a, b) {
return linkedByIndex[a.index + "," + b.index]; return linkedByIndex[a.index + "," + b.index];
} }
function connectedNodes() { function connectedNodes() {
if (toggle == 0) { if (toggle == 0) {
//Reduce the opacity of all but the neighbouring nodes //Reduce the opacity of all but the neighbouring nodes

Loading…
Cancel
Save