Javascript 高亮显示根目录的父路径

我试图通过更改节点和链接的填充来突出显示从鼠标所在节点到根节点的路径。我用的是迈克家的一棵放射状整齐的树

我尝试了

节点。祖先（）。
当我尝试创建一个变量并将
node.parent
放入其中，或使用
d3.select（this.parentNode）
时，它也不起作用

我在谷歌群组上发现有人试图做相反的事情，而迈克·博斯托克的问题来自他的树数据

我使用了Mike给出的方法，效果非常好：

node.on("mouseover", function(p) {

  //color the links
  link.filter(function(d) {
    for (d = d.source; d; d = d.parent) {
      if (d === p) return true;

      }
  }).style("stroke","black");

  //color the nodes 
  node.filter(function(d) {
    while(d = d.parent){
      if(d === p) return true ;
    }
  }).style("fill","red");

});

它改变了颜色，我也用
mouseout
做了相反的事情。
但我无法将其配置为相反的方向（节点到父节点到根节点），有人能帮我吗？
您需要稍微不同的方法来让节点从子节点到根节点。想到的一个选项是收集链中所有节点的列表：

node.on("mouseover", function(p) {

    var nodes = [];
    nodes.push(p);

    while(p.parent) {
        p = p.parent;
        nodes.push(p);
    }

由于具有父节点的每个节点都有一个包含其父对象的属性，因此这将获得选定节点上游的每个节点。鼠标覆盖的节点也被选中，这将允许我们选择链接

现在要设置节点样式很容易，只需查看节点的基准是否位于我们刚刚创建的节点阵列中：

  node.filter(function(d) {
        if(nodes.indexOf(d) !== -1) return true;
  }).style("fill","steelblue");

为了给节点着色，我们使用了类似的方法，但要检查每个链接的目标是否在我们的节点数组中：

  //color the links
  link.filter(function(d) {
     if(nodes.indexOf(d.target) !== -1) return true;
  }).style("stroke","orange");

必须是目标-因为每个节点上只有一条路径会终止，但每个节点上可能有多条路径，这就是为什么我们需要将原始节点的数据推入阵列中

仅具有上游高亮显示的设置。
仅为了完整性：
祖先（）
可以工作，但您必须在层次结构上调用它，而不是在选择上调用它：

.on("mouseover", function(d) {
    var filtered = node.filter(function(e) {
        return d.ancestors().indexOf(e) > -1
    });
    filtered.selectAll("circle").style("fill", "red");
    filtered.selectAll("text").style("fill", "red");
})

以下是更新的bl.ocks：