Highlight Parent Path To The Root

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

Solution 1:

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) returntrue;
  }).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) returntrue;
  }).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.

Solution 2:

Just for completeness: ancestors()do work, but you have to call it on the hierarchy, not on the selection:

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

Here is the updated bl.ocks: https://bl.ocks.org/anonymous/bb5be85d509eb7824e95d193c4fb6d27/e87fb16f8058f85719647dde561bff12f998361a