突出显示根的父路径 [英] Highlight parent path to the root

问题描述

我尝试通过更改节点和链接的填充来突出显示从鼠标所在的节点到根节点的路径.我在 Block 上使用Mike的Radical Tidy Tree.

我尝试了node.ancestors()，但是无法将其识别为功能. 当我尝试创建一个变量并将node.parent放入其中或使用d3.select(this.parentNode)时，它也不起作用.

我在Google网上论坛上发现有人试图做相反的事情，而Mike Bostock

它会改变颜色，我对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");

已成为目标-因为只有一条路径会在每个节点处终止，但是几个路径可能会在每个节点处出现，因此我们需要将原始节点的基准面推入数组

这里是仅上游突出显示的设置.

I try to highlight paths from the node I have my mouse on to the root node by changing the fill of the nodes and links. I am using a Radial Tidy Tree from Mike's on Block.

I tried the node.ancestors(), but this is not recognized as a function. When I try to create a variable and put node.parent in it, or use d3.select(this.parentNode) it does not work either.

I found on a Google Groups someone trying to do the contrary, and Mike Bostock told them the problem is coming from his tree data.

I used the method Mike gave and it worked perfectly:

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

});

It changes the color, and I also did the contrary with mouseout. But I cannot configure it with the opposite direction (node to parent to root), can someone help me do it?

解决方案

You'll need a slightly different approach to get nodes going from child to root. One option that comes to mind is gathering a list of all the nodes in the chain:

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

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

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

As each node that has a parent has an attribute containing its parent object, this will get you every node upstream of the selected node. The mouseovered node is selected too, which will allow us to select the links.

To style the nodes now is easy, simply see if the node's datum is located in the array of nodes we just created:

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

To color the nodes, we use a similar approach, but check to see if the target of each link is in our array of nodes:

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

Has to be target - as only one path will terminate at each node, but several paths may originate at each node, this is why we need to push the original node's datum into the array

Here's a set up with just the upstream highlighting.

这篇关于突出显示根的父路径的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！