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佈局代碼，並發現了遍歷佈局節點的廣度優先搜索實現。對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); 
}