求助：如何实现Radial Tidy Tree中鼠标悬停节点到根节点的路径高亮

我明白你现在的需求——在鼠标悬停径向树的某个节点时，高亮显示从这个节点一路向上到根节点的完整路径，而你之前的代码实现的是反过来高亮该节点的后代路径对吧？我来帮你调整逻辑实现正向路径高亮。

核心思路调整 #

你之前的代码是判断节点/链接是否能追溯到悬停节点（也就是找后代），现在我们需要收集悬停节点的所有祖先（包括自身），然后只高亮这些节点和对应的父节点链接。

具体实现代码 #

首先，假设你用的是D3 v4+版本（如果是更旧的版本，我们也有兼容写法），可以这样写mouseover事件：

node.on("mouseover", function(event, p) {
  // 收集从当前节点p到根节点的所有节点（包括p和根）
  const pathNodes = [];
  let currentNode = p;
  while (currentNode) {
    pathNodes.push(currentNode);
    currentNode = currentNode.parent;
  }

  // 高亮路径上的节点
  node.filter(d => pathNodes.includes(d))
    .style("fill", "red");

  // 高亮路径上的链接：树的链接是父→子，所以每个非根节点对应一条指向父节点的链接
  link.filter(d => pathNodes.includes(d.target))
    .style("stroke", "black");
});

如果你的D3版本是v4及以上，其实节点对象自带ancestors()方法（可能你之前没找到正确的调用方式？），可以简化收集节点的步骤：

node.on("mouseover", function(event, p) {
  // 直接获取当前节点到根的所有节点（包括自身）
  const pathNodes = p.ancestors();

  // 后续高亮逻辑和上面一致
  node.filter(d => pathNodes.includes(d))
    .style("fill", "red");
  link.filter(d => pathNodes.includes(d.target))
    .style("stroke", "black");
});

鼠标移出恢复样式 #

然后是mouseout事件的恢复逻辑，记得要对应你原始的节点填充色和链接描边色，比如：

node.on("mouseout", function() {
  // 恢复节点原始填充色，替换成你自己的默认颜色
  node.style("fill", "#555");
  // 恢复链接原始描边色，替换成你自己的默认颜色
  link.style("stroke", "#ccc");
});

为什么之前的代码不生效？ #

你之前的代码里，node.filter的逻辑是遍历节点的父链看是否等于悬停节点p，这其实是在找p的子节点/后代节点，而不是p的祖先。我们现在把逻辑反过来，直接收集p的所有祖先节点，再筛选匹配的节点和链接，就能实现从当前节点到根的路径高亮了。

内容的提问来源于stack exchange，提问作者Raphael Lopes