How to change the colors of all highlighted nodes in d3JS force directed graph?

Question

Existing functionality:

When mouse hover on the any node , all the connected nodes are getting highlighted.

Expected Output:

When mouse hover on any node, all connected nodes are getting highlighted But the highlighted nodes should be of same color and go back to previous state on mouse out.

I am trying to implement this functionality but its not working as expected.

Please refer the working code snippet here: jsfiddle

function selectNode(selectedNode) {
  var neighbors = getNeighbors(selectedNode)

  nodeElements.transition().duration(500)
  .attr('r', function(node) {
        return getNodeRadius(node,neighbors);
   })

    .attr('fill', function(node) {
        return getNodeColor(node,neighbors);
   })


   textElements.transition().duration(500).style('font-size', function(node) {
    return getTextColor(node, neighbors)
  })


  linkElements.transition().duration(500).style('stroke', function(link) {
    return getLinkColor(selectedNode, link)
  })
}

function getNodeColor(node, neighbors) {
  // If is neighbor
  if (Array.isArray(neighbors) && neighbors.indexOf(node.id) > -1) {
    return 'rgba(123, 239, 178, 1)'
       .attr('fill', function(d, i) { return 'url(#grad' + i + ')'; })
    // return node.level === 1 ? '#9C4A9C' : 'rgba(251, 130, 30, 1)'
  }  else {
      return color(node.id);
  }
  //return node.level === 0 ? '#91007B' : '#D8ABD8'
}



 var nodeElements =  g.append("g")
  .attr("class", "nodes")
  .selectAll("circle")
  .data(graph.nodes)
  .enter().append("circle")
  .attr("r", 60)

  .attr("stroke", "#fff")
  .attr('stroke-width', 21)
  .attr("id", function(d) { return d.id })
   //.attr("fill", function(d) {return color(d.id)}) 
     .attr('fill', function(d, i) { return 'url(#grad' + i + ')'; })
     .on('contextmenu', function(d){ 
        d3.event.preventDefault();
        menu(d3.mouse(svg.node())[0], d3.mouse(svg.node())[1]);
    })
      .on('mouseover', selectNode)
      .on('mouseout', releaseNode)
  .call(d3.drag()
    .on("start", dragstarted)
    .on("drag", dragged)
    .on("end", dragended));

Answer 1

There are five places you need to change your code.

The first and second one is selectNode look for comments

function selectNode(selectedNode) {
    var neighbors = getNeighbors(selectedNode)

    nodeElements.transition().duration(500)
    .attr('r', function(node) {
        return getNodeRadius(node,neighbors);
    });
    // do not use transition here, it kinda ruins the flavour  
    // or see if you like it with transitions, your call  
    nodeElements.attr('fill', function(node) {
        // send selectedNode to your getNodeColor
        return getNodeColor(node,neighbors,selectedNode);
    })
}

The third and fourht one as you might have guessed will be getNodeColor

function getNodeColor(node, neighbors, selectedNode) {
    if (Array.isArray(neighbors) && neighbors.indexOf(node.id) > -1) {
        return 'url(#grad' + selectedNode.index + ')'
    }  else {
        // use gradient here
        return 'url(#grad' + node.index + ')'
    }
}

The last one would be your releaseNode

function releaseNode() {
    nodeElements.transition().duration(500)
        .attr('r', 60);

    // don't use transitions here
    // or see if you like it with transitions, your call  
    nodeElements.attr('fill', function(d, i) { return 'url(#grad' + i + ')'; })

    linkElements.transition().duration(500).style('stroke', 'grey');
}

here is a working fiddle for you to experiment with