突出显示根目录的父路径

我尝试通过更改节点和链接的填充来突出显示从鼠标所在的节点到根节点的路径。我正在使用 Mike's 的 Radial Tidy TreeBlock https://bl.ocks.org/mbostock/4063550.

我尝试过node.ancestors()，但这不被识别为函数。 当我尝试创建一个变量并放置node.parent在其中，或使用d3.select(this.parentNode)它也不起作用。

我在 Google 网上论坛上发现有人试图做相反的事情，迈克·博斯托克 (Mike Bostock)告诉他们 https://groups.google.com/forum/#!msg/d3-js/Cw94911QIB4/E818lrkTa_AJ问题出在他的树数据上。

我使用了迈克提供的方法，效果非常好：

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

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

Here's https://bl.ocks.org/Andrew-Reid/6d75b1ab444f5eda554e6bf8a1b4070b仅突出显示上游的设置。