突出显示根目录的父路径

Question

我尝试通过更改节点和链接的填充来突出显示从鼠标悬停的节点到根节点的路径。我在 Block.

上使用 Mike 的 Radial Tidy Tree

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

我在 Google 组中发现有人试图做相反的事情，而 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做了相反的事情。但是我不能用相反的方向配置它（节点到父节点到根），有人可以帮我做吗？

Answer 1

您需要一种稍微不同的方法来让节点从子节点到根节点。想到的一个选择是收集链中所有节点的列表：

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

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

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

由于每个具有父节点的节点都有一个包含其父对象的属性，这将使您获得 selected 节点上游的每个节点。鼠标悬停的节点也被 selected，这将允许我们 select links.

现在给节点设置样式很简单，只需查看节点的数据是否位于我们刚刚创建的节点数组中即可：

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

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

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

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

Here's 仅上游突出显示的设置。

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

突出显示根目录的父路径

Highlight parent path to the root

javascript

tree

path

highlight

d3.js