D3 無法在鼠標懸停時 select 兩個元素

Question

我在 React 組件的useEffect中創建了圖形力模擬，並嘗試使用d3突出顯示節點、節點的鄰居以及它們的連接邊。 我可以使用 `.on('mouseover') 方法更改節點及其鄰居的顏色，但是，我也無法更改鏈接/邊緣顏色。 我已經確保我獲得了正確的鏈接#id，但我無法更改鏈接的 colors。

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

d3.selectAll(neighbors.links) NodeList 不工作 Output 是我正在嘗試的 select 的 id

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

為d3.selectAll(neighbors.nodes)工作 Output

     _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

任何幫助是極大的贊賞！ 我無法理解為什么我可以更改添加 class 到neighbors.nodes ，而不是neighbors.links 。

Answer 1

由於某種原因，我無法添加 class，所以我直接使用以下方式修改了樣式：

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