Highlight A Node And Its Neighbour Node In Force Directed Graph

I have created a force directed graph using D3.JS Library, On mouseover what I would like to do is to highlight a node and its neighbour node and fade away all other nodes. On mou

Solution 1:

This is almost a complete copy and paste from this question, see there for the explanation of the details.

The only things I have changed is to fade the nodes/links out/in with a transition and added connections in both directions to the data structure that is used to determine the neighbours. Complete demo here.

Solution 2:

It might turn out easier if you fork this plunker and study the main piece:

var linkedByIndex = {};
    json.links.forEach(function(d) {
    linkedByIndex[d.source.index + "," + d.target.index] = 1;
});

functionisConnected(a, b) {
    return linkedByIndex[a.index + "," + b.index] || linkedByIndex[b.index + "," + a.index] || a.index == b.index;
}