D3 js Force Directed Graph - highlight path between two points

Question

I am using the following force directed example for one of my project.

Example Link

Here, I need something like: - Highlight the paths between "Microsoft" and "Sony".

Is it possible ?

Please help me.

Answer 1

You will need to add a mouseover listener to the lines in the force layout and add a custom css class providing highlighting as follows:

link.on('mouseover', function(d, i){
   d3.select(this).classed('mouseover', true);
})
.on('mouseout', function(d, i){
    d3.select(this).classed('mouseover', false);
});

mouseover is a css class with required properties for highlighting. Highlight happens when you mouse over a particular line.

You can refer to fiddle here for an example: http://jsfiddle.net/prashant_11235/Ukb28/

Answer 2

This question seems to have an algorithm that does what you want, although it's coded in Java. I don't know if that will help.