D3.js force layout : show root path of any node

Question

I am using force layout of d3.js and I need to show the path to the root in graph. Ex- On click of "Task 10" node it should show the path (Task 10->Task 6-> Task 4-> Task 1). Root will be recognize as same source and target but this info I am passing in data only. My data contain "RootPath" having path info for the node like for "Task 10" RootPath is ["Task 6","Task 4","Task 1"] .

My complete code for the graph can be seen here http://plnkr.co/edit/EvpNC6B5DBWczNXKiL82?p=preview .

I am writing below method so that on click to the particular node it will show the root path. But currently it only show for 1 node. I don't know how to iterate for all other lists of node.

  function rootPath(d){
    var curNodeDetail = d.details.RootPath;
    var source=[],target=[],i=0,j=0;
    source[i] = d.name;
    target[i] = curNodeDetail[i];
    links.style("stroke-opacity", function(o) {
            if(source[i] === o.source.name && target[i] === o.target.name){
                source[i+1] = curNodeDetail[i];
                target[i+1] = curNodeDetail[i+1];
                i++;
                return  1;      
            }
            else    
                return 0.1;     
        })
        .attr("marker-end", function(o){
                if(source[j] === o.source.name && target[j] === o.target.name){
                        j++;
                        return "url(#arrowhead)";
                }
                else
                    return "url(#arrowhead2)";
        });
  }

Answer 1

Turn d.details.rootpath into a d3.set and add the current node, then interrogate each link to see if both ends are part of the set.

This works for your links, but you'll have to do likewise for the nodes -->

var curNodeDetail = d.details.RootPath;
var rootMap = d3.set (curNodeDetail);
rootMap.add(d.name);
links.style("stroke-opacity", function(o) {
        return (rootMap.has(o.source.name) && rootMap.has (o.target.name)) ? 1 : 0.1;
    })
    .attr("marker-end", function(o){
            return (rootMap.has(o.source.name) && rootMap.has (o.target.name)) ? "url(#arrowhead)" : "url(#arrowhead2)";
    });

}

Answer 2

Below function can be useful :-

function rootPath(d){
    var curNodeDetail = d.details.RootPath;
    var rootMap = rootPathItinerary(d.name,curNodeDetail);
    links.style("stroke-opacity", function(o) {
            return (rootMap.has(o.source.name) && (rootMap.get(o.source.name) === o.target.name)) ? 1 : 0.1;
    })
    .attr("marker-end", function(o){
            return (rootMap.has(o.source.name) && (rootMap.get(o.source.name) === o.target.name)) ? "url(#arrowhead)" : "url(#arrowhead2)";
    });
}

function rootPathItinerary(node,rootPathDet){
    var i=0;
    var map = d3.map();
    map.set(node,rootPathDet[i]);//10,6
    while(i+1 <rootPathDet.length){ //6,4,1
            map.set(rootPathDet[i],rootPathDet[i+1]) ; //6,4 ; 4,1
            i++;
    }
    return map;
}