|
@ -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'> × </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'> × </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'> × </span><div id='bio" + i.id + "'>" + i.bio + "</div>"); |
|
|
divBio.html("<div id='showbio'><span onclick=this.parentElement.style.display='none' class='topleft'> × </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
|
|
|