1

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 mouseout event I want to reset the graph like the way it is.

I have tried the following code for the highlight part but its not working:

    .on("mouseover", function(d) { 

d3.select(this).select("circle").style("stroke-width", 6);
var nodeNeighbors = graph.links.filter(function(link) {

 return link.source.index === d.index || link.target.index === d.index;})
                        .map(function(link) {

 return link.source.index === d.index ? link.target.index : link.source.index; });

Following is thelink for my force directed graph

analyticalpicasso
  • 1,993
  • 8
  • 26
  • 45
  • 1
    [This question](http://stackoverflow.com/questions/8739072/highlight-selected-node-its-links-and-its-children-in-a-d3-force-directed-grap) and [this question](http://stackoverflow.com/questions/19154129/d3js-force-directed-graph-advanced-highlighting-of-neigbour-nodes-and-links) may help. – Lars Kotthoff Apr 14 '14 at 18:18
  • @LarsKotthoff I have updated my code with the following examples but still its not working. http://plnkr.co/edit/d3a92HOodd7lQdPr6wQd?p=preview – analyticalpicasso Apr 15 '14 at 06:01

2 Answers2

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;
});

function isConnected(a, b) {
    return linkedByIndex[a.index + "," + b.index] || linkedByIndex[b.index + "," + a.index] || a.index == b.index;
}
FernOfTheAndes
  • 4,975
  • 2
  • 17
  • 25
2

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.

Community
  • 1
  • 1
Lars Kotthoff
  • 107,425
  • 16
  • 204
  • 204