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

Сугубо основан на том, здесь есть функция, чтобы выделить все пути от щелкнули узла в обоих направлениях - вперед (Target) и назад (Source)

Надеюсь, это поможет кто то!

Рабочий пример - 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); 
}