D3js Force Directed - On Hover To Node, Highlight/colourup Linked Nodes And Links?

I have force directed graph with 4 types of nodes and two types of links. One type of node (the small blue one) I'm using as 'connection node' between two bigger nodes. on mouseove

Solution 1:

The way I solved this problem in my own project was to examine the links to see if their source or target properties matched the hovered node. This should be a step in the right direction.

// On node hover, examine the links to see if their
// source or target properties match the hovered node.
node.on('mouseover', function(d) {
  link.style('stroke-width', function(l) {
    if (d === l.source || d === l.target)
      return 4;
    else
      return 2;
    });
});

// Set the stroke width back to normal when mouse leaves the node.
node.on('mouseout', function() {
  link.style('stroke-width', 2);
});

Updated fiddle: http://jsfiddle.net/2pdxz/2/