D3 unable to select two elements in mouseover

Question

I've created a graph force simulation in a useEffect of a React component and am trying to highlight the node, the nodes' neighbors, and their connecting edges using d3 . I'm able to change the color of the node and it's neighbors using the `.on('mouseover') method, however, I'm unable to also change the link/edge color. I've ensured I'm getting the right #ids for the links, but I can't change the colors of the links.

nodeAndLabel
   .append("circle")
      .attr("class", "node")
      .attr("r", 10)
      .attr("id", function(d){return d.name})
      .on("mouseover", function(d, i){
             let neighbors = getNeighbors(i);
             
             d3.select(this).attr("class", "hoveredNode");

             d3.selectAll(neighbors.nodes)
                .attr("class", "hoveredNeighbor") //working
                        
            d3.selectAll(neighbors.links)
                .attr("class", "hoveredNeighbor"); // not working

           console.log("have hovered over: ",d3.selectAll(neighbors.links))
               });

Not working Output for d3.selectAll(neighbors.links) NodeList is what I'm trying to select the ids for

      _groups: Array(1)
          0: NodeList(3) [line#link_0, line#link_1, line#link_2]
      length: 1
         __proto__: Array(0)
         _parents: [html]
         __proto__: Object

Working Output for d3.selectAll(neighbors.nodes)

     _groups: Array(1), _parents: Array(1)}
     _groups: Array(1)
        0: NodeList(3) [circle#Antonia, circle#Mark, circle#Devin]
     length: 1
        __proto__: Array(0)
        _parents: [html]
        __proto__: Object

Any help is greatly appreciated! I'm having trouble understanding why I can change add a class to neighbors.nodes , but not neighbors.links .

Answer 1

For some reason, I was unable to add a class, so I modified the style directly using:

.style("stroke", "aliceblue");