d3 Sankey - Markieren Sie alle verbundenen Pfade von Anfang bis Ende

Question

Ich versuche, alle verbundenen Links und Links ihrer Zielknoten bis zum Ende des Layouts zu markieren.

Die erste Stufe des Hervorhebens leicht wie folgt erreicht werden kann -

highlight_paths(1)

auf Knoten klicken, rufen;

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

Aber ich bin noch nicht der Lage, einen rekursiven Algorithmus korrekt schreiben alle & Zielknoten die sourceLinks und targetLinks jeder der angeschlossenen Quelle zu bekommen.

Alle Gedanken sind willkommen!

Danke.

Answer 1

Ich habe den Layout-Code von Sankey durchsucht und eine Implementierung der Breadth First Search zum Durchqueren der Layout-Knoten gefunden. Einige Kenntnisse über BFS hier - http://www.cse.ohio-state.edu/~gurari/course/cis680/cis680Ch14.html

Rein basierend auf, dass hier ist die Funktion in alle Pfade vom geklickt Knoten markieren beiden Richtungen - Forward (Target) und Rückwärts (Quelle)

this helps jemand!

Arbeitsbeispiel - 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); 
}