how to highlight(change color) of all connected(neighbours) nodes and links in a d3 force directed graph

Question

I saw this example here http://www.d3noob.org/2013/03/d3js-force-directed-graph-example-basic.html I can understand it to an extent where I can make basic changes, but have not been able to do one thing specifically which is to highlight (change color) of all connected nodes. e.g If I mouse over node 1 or click on node 1,it should find all neighboring nodes and highlight the link paths by changing color.

I looked at clicking a node in d3 from a button outside the svg already answered but I couldn't make it work on this example.

I will be grateful if someone can help here and modify the existing code to achieve the searching of connected nodes/links.

I do apologize if this is really a very basic question and I am missing something really obvious here.

Answer 1

I would recommend reading the Drag Behavior Documentation: https://github.com/mbostock/d3/wiki/Drag-Behavior. So the fundamental way you go about changing the color of nodes is by toggling the classes on a drag start event. For example, consider the following CSS:

.node {
  stroke: #000000;
  stroke-width: 1.5px;
}

circle.others{

 fill: #C0C0C0;    
} 

Now considering you have expressed your nodes as circles for the sake of this example (this is done in the d3 Force Directed Graph: http://bl.ocks.org/mbostock/4062045), you can then register a dragstart event in your d3 script, like this:

function dragstart(d) { 
 d3.selectAll("circle").classed("others",true);  
 d3.select(this).classed("others", false); 

}   

This same idea, can be applied to links. Hope that helps!

Answer 2

In d3.js v4 , you should just do it like this and it should just work.

First, drag begin:

function dragstarted(d) {
    if (!d3.event.active) simulation.alphaTarget(0.3).restart();
    d.fx = d.x;
    d.fy = d.y;

    d3.selectAll("line").transition().duration(500)
        .style("opacity", function (o) {
            return o.source === d || o.target === d ? 1 : 0;
        });
    d3.selectAll("circle").transition().duration(500)
        .style("opacity", function (o) {
            return neighboring(d, o) ? 1 : 0;
        });

}

Second, drag end:

function dragended(d) {
    if (!d3.event.active) simulation.alphaTarget(0);
    d.fx = null;
    d.fy = null;
    d3.selectAll("line").transition().duration(500)
        .style("opacity", 1);
    d3.selectAll("circle").transition().duration(500)
        .style("opacity", 1);
}

Of course, you should define a neighbor function:

graph.links.forEach(function(d) {
      linkedByIndex[d.source.index + "," + d.target.index] = 1;
      linkedByIndex[d.target.index + "," + d.source.index] = 1;
    });
function neighboring(a, b) {
    return a.index == b.index ||  linkedByIndex[a.index + "," + b.index];
}