突出显示从子目录到根目录的所有路径。

Question

我试图通过改变节点和链接的填充来突出显示从我的鼠标所在节点到根节点的路径。我正在使用Mike在Block上的径向整洁树。

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

我在Google Groups上找到了有人试图做相反的事情，Mike Bostock told them问题来自于他的树形数据。

我使用了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 做了相反的操作。但是我无法将其配置为相反的方向（从节点到父节点到根节点），有人可以帮我吗？

- Raphael Lopes

Answer 1

若要从子节点到根节点进行遍历，需要采取稍微不同的方法。一种可行的方案是收集链中所有节点的列表：

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

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

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

每个具有父节点的节点都包含一个属性，其中包含其父对象，这将使您获得所选节点上游的每个节点。也会选择mouseovered节点，这将允许我们选择链接。

现在很容易对节点进行样式设置，只需查看节点数据是否位于我们刚刚创建的节点数组中：

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

必须定位目标 - 因为每个节点只有一条路径会终止，但是每个节点可能会有多条路径起点，这就是为什么我们需要将原始节点数据推入数组中的原因。 这里 是一个仅具上游突出显示的设置。

- Andrew Reid

Answer 2

为了完整起见： ancestors() 是有效的，但您必须在层次结构上调用它，而不是在选择上调用：

.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: https://bl.ocks.org/anonymous/bb5be85d509eb7824e95d193c4fb6d27/e87fb16f8058f85719647dde561bff12f998361a

- Gerardo Furtado