Javascript 在d3中鼠标悬停时，如何突出显示节点、它们连接的节点和它们的连接？

我有一个简单的节点链接图。我想更改悬停在其上的节点及其连接节点的颜色。我还希望链接本身变得更大或更大胆。我是根据我找到的一个公认的答案来编写代码的。以下是

mouseover（）

函数的相关代码块：

.on("mouseover", function (d) {
      var connectedNodes = data.links
        .filter((x) => x.source === d.name || x.target === d.name)
        .map((x) => (x.source === d.name ? x.target : x.source));

    //my function to highlight node and connected nodes. only highlights first node in map.
      d3.select(".node")
        .selectAll("circle")
        .attr("fill", function (c) {
          if (connectedNodes.indexOf(c.name) > -1 || c.name === d.name)
            return "red";
          else return "blue";
        });
      console.log(data.links);
      console.log(connectedNodes);
    })

---

第一个问题是，

.filter（）

函数在记录时返回一个空数组。我做错了什么？

据我猜测，您的筛选函数缺少一个属性

.on("mouseover", function (d) {
  var connectedNodes = data.links
    .filter((x) => **x.source === d.name || x.target === d.name**)

我记录了

x.source

，发现它是一个带有一个键

name

的对象，因此该对象不等于字符串，返回值为空

将

x.source

更改为

x.source.name

并将

x.target

更改为

x.target.name

（在映射函数中相同），返回值将不会为空

突出显示

您使用了

d3。选择（“.node”）

只返回一个选择，因为每个节点都由

g

元素分组。使用d3。选择All（“.node”）

.on("mouseover", function(d) {
var connectedNodes = data.links
  .filter((x) => x.source.name === d.name || x.target.name === d.name)
  .map((x) => (x.source.name === d.name ? x.target.name : x.source.name));

//my function to highlight node and connected nodes. only highlights first node in map.
  d3.selectAll(".node") 
    .selectAll("circle")
    .attr("fill", function (c) {
      
      if (connectedNodes.indexOf(c.name) > -1 || c.name === d.name)
        return "red";
      else return "blue";
    });

})