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

【问题标题】：How do you highlight nodes, their connected nodes, and their connections when moused over in d3?在 d3 中鼠标悬停时如何突出显示节点、它们连接的节点和它们的连接？
【发布时间】：2020-09-09 20:32:54
【问题描述】：

我有一个简单的节点链接图this fiddle example。我想更改悬停在其上的节点及其连接节点的颜色。我还希望链接本身变得更大或更粗。我的代码基于我找到的已接受答案here。以下是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() 函数在记录时返回一个空数组。我做错了什么？

【问题讨论】：

标签： javascript d3.js filter

【解决方案1】：

根据我的猜测，您的过滤器函数缺少一个属性。

.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（在map函数中相同），返回不会为空。

突出显示

您使用了d3.select(".node") ，因此只会返回一个选择，因为每个节点都由g 元素分组。请改用d3.selectAll(".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";
    });

})

working fiddle

【讨论】：