From 1bad5144e08f525a5833d1c26e96311fd071f351 Mon Sep 17 00:00:00 2001
From: Katja <bax5612@studium.uni-hamburg.de>
Date: Tue, 16 Nov 2021 16:38:42 +0100
Subject: [PATCH] highlight links and nodes on click
---
Output/index.html | 57 ++++++++++++++++++++++++++++++++++++++++++-----
1 file changed, 51 insertions(+), 6 deletions(-)
diff --git a/Output/index.html b/Output/index.html
index 1b0fd96..2bfd029 100644
--- a/Output/index.html
+++ b/Output/index.html
@@ -57,6 +57,21 @@
.attr('d', 'M 0,-5 L 10 ,0 L 0,5')
.attr('fill', '#999')//arrowhead color
.style('stroke','none');
+
+ svg.append('defs').append('marker')//arrowhead
+
+ .attrs({'id':'arrowhead2',
+ 'viewBox':'-0 -5 10 10',
+ 'refX':r+10,
+ 'refY':0,
+ 'orient':'auto',
+ 'markerWidth':10,
+ 'markerHeight':15,
+ 'xoverflow':'visible'})
+ .append('svg:path')
+ .attr('d', 'M 0,-5 L 10 ,0 L 0,5')
+ .attr('fill', 'black')//arrowhead color
+ .style('stroke','none');
var simulation = d3.forceSimulation()
@@ -124,16 +139,25 @@
node.append("circle")
.attr("r", r)
.attr("class", "circle")
- //.style("fill", function (d, i) {return colors(i);})
.style("fill", function(d){ return color(d.group)})
- //.style("stroke", "red")
.on('click', function(d) {
if(toRemove){
- d3.select(toRemove).selectAll(".circle").attr("r", r);
+ d3.select(toRemove).selectAll(".circle").style("stroke","none")
}
toRemove = this.parentNode;
- d3.select(this).attr("r", 30)
+
+ d3.select(this).style("stroke","black")
+
+ d3.selectAll(".link").style("stroke", function(o) {
+ return isLinkForNode(d, o) ? "black" : "#000000";})
+
+ d3.selectAll(".link").style("stroke-opacity", function(o) {
+ return isLinkForNode(d, o) ? "1" : ".6";})
+
+ d3.selectAll(".link").attr('marker-end', function(o) {
+ return isLinkForNode(d, o) ? 'url(#arrowhead2)' : 'url(#arrowhead)';})
+
textfunc(d,h)
})
@@ -151,10 +175,22 @@
.on('click', function(d) {
if(toRemove){
- d3.select(toRemove).selectAll(".circle").attr("r", r);
+ d3.select(toRemove).selectAll(".circle").style("stroke","none");
}
toRemove = this.parentNode;
- d3.select(this.parentNode).selectAll(".circle").attr("r", 30)
+ d3.select(this.parentNode).selectAll(".circle").style("stroke","black")
+
+
+ d3.selectAll(".link").style("stroke", function(o) {
+ return isLinkForNode(d, o) ? "black" : "#000000";})
+
+ d3.selectAll(".link").style("stroke-opacity", function(o) {
+ return isLinkForNode(d, o) ? "1" : ".6";})
+
+ d3.selectAll(".link").attr('marker-end', function(o) {
+ return isLinkForNode(d, o) ? 'url(#arrowhead2)' : 'url(#arrowhead)';})
+
+
textfunc(d,h);
});
@@ -166,6 +202,15 @@
.links(links);
}
+ function isLinkForNode(node, link){
+ return link.source.index == node.index || link.target.index == node.index;
+ }
+ function colorlink(o,f){
+ document.getElementById("id").innerHTML = o.target
+ o.source === f || o.target === f ? o.style("stroke","black") : o.style("stroke","#000000");
+ }
+
+
function textfunc(d,h){
d3.selectAll("foreignObject").remove()
--
GitLab