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