highlight links and nodes on click

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()