d3 Sankey - すべての接続パスを最初から最後までハイライト表示

Question

ターゲットノードのリンクとリンクをすべてレイアウトの終わりまで強調表示しようとしています。

次のように強調表示の最初のレベルを容易に達成することができる -

ノードをクリックし、コールhighlight_paths(1)オン;

function highlight_paths(stroke_opacity) { 
    return function(d,i){ 
     d.sourceLinks.forEach(function(srcLnk){ 
      d3.select("#link"+srcLnk.id).style("stroke-opacity", stroke_opacity); 
     }); 
     d.targetLinks.forEach(function(srcLnk){ 
      d3.select("#link"+srcLnk.id).style("stroke-opacity", stroke_opacity); 
     }); 
    } 
} 

しかし、私はまだ接続されたソース&ターゲット・ノードのそれぞれのすべてのsourceLinksとtargetLinksを得るために正しく再帰アルゴリズムを記述することはできませんよ。

すべてのご意見をいただきありがとうございます。

ありがとうございました。

Answer 1

私はsankeyのレイアウトコードを調べており、レイアウトノードを横断するためのBreadth First Searchの実装が見つかりました。ここでBFSのいくつかの知識 - http://www.cse.ohio-state.edu/~gurari/course/cis680/cis680Ch14.html

純粋にそれに基づいて、ここでは両方向でクリックしたノードからすべてのパスを強調表示する機能がある - フォワード（ターゲット）と後方（出所）

・ホープ、このことができます誰か！

の作業例 - http://bl.ocks.org/git-ashish/8959771

function highlight_node_links(node,i){ 

    var remainingNodes=[], 
     nextNodes=[]; 

    var stroke_opacity = 0; 
    if(d3.select(this).attr("data-clicked") == "1"){ 
    d3.select(this).attr("data-clicked","0"); 
    stroke_opacity = 0.2; 
    }else{ 
    d3.select(this).attr("data-clicked","1"); 
    stroke_opacity = 0.5; 
    } 

    var traverse = [{ 
        linkType : "sourceLinks", 
        nodeType : "target" 
        },{ 
        linkType : "targetLinks", 
        nodeType : "source" 
        }]; 

    traverse.forEach(function(step){ 
    node[step.linkType].forEach(function(link) { 
     remainingNodes.push(link[step.nodeType]); 
     highlight_link(link.id, stroke_opacity); 
    }); 

    while (remainingNodes.length) { 
     nextNodes = []; 
     remainingNodes.forEach(function(node) { 
     node[step.linkType].forEach(function(link) { 
      nextNodes.push(link[step.nodeType]); 
      highlight_link(link.id, stroke_opacity); 
     }); 
     }); 
     remainingNodes = nextNodes; 
    } 
    }); 
} 

function highlight_link(id,opacity){ 
    d3.select("#link-"+id).style("stroke-opacity", opacity); 
}