-1

I am new to D3.js. In fact, I am just starting to learn it to implement it in a new prototype at work. So the problem I have is this:

I have a graph with connectivity from any one node to any other node (no cycles, however). So suppose I want to click/double click on a particular node, and then hover the mouse over another node, is it possible to highlight all the connecting paths between the two nodes whilst greying out the other links and nodes? Initially I thought that just hovering over over a node should trigger the highlighting of paths, but then I realized that in my case, all the links would be highlighted! So I struck upon the idea that I could select a node by clicking it, and then choose the other node by hovering on top of it.

Is this even feasible? Any alternatives would also be highly appreciated!

  • Or any other mode of selecting the two nodes between which to highlight the links should be fine. –  Apr 13 '15 at 17:22
  • See e.g. [this question](http://stackoverflow.com/questions/8739072/highlight-selected-node-its-links-and-its-children-in-a-d3-force-directed-grap) or [this example](http://bl.ocks.org/git-ashish/8959771). – Lars Kotthoff Apr 13 '15 at 20:14
  • @LarsKotthoff Thanks! I did see both links while searching for similar problems, but they don't seem to be quite what I'm looking for. The Sankey example only highlights directly connected nodes, but the top answer for the first link certainly has some good ideas related to what I'm trying. Too bad the jsfiddle doesn't seem to work! –  Apr 15 '15 at 21:04
  • Ah right, security restrictions... You should be fine if you copy the code from the fiddle. – Lars Kotthoff Apr 15 '15 at 22:20

1 Answers1

0

Okay, so I was able to get part of the problem fixed. I can get one of the full length paths between any two random nodes in the graph using a variant of BFS where I maintain another array to keep track of the visited nodes, and then trace the path back recursively (if at least one path exists between the selected nodes that is). This way I am able to select two nodes (using clicks) in the graph, press the spacebar to highlight the path between the two nodes, and then click on any empty part of the page to remove the highlighting. Please note that I had to get a complete adjacency matrix for the nodes (bidirectional) in order to make this work.

In case anyone else is interested, I can share more details. From this, I figure it's just one hop more to get all the paths between two randomly selected nodes.