D3.js d3 Sankey-高亮显示从开始到结束的所有连接路径

我试图突出显示所有连接的链接及其目标节点的链接，直到布局结束

第一级高亮显示可轻松实现，如下所示：

在节点单击时，调用

突出显示路径（1）

但是我还不能正确地编写递归算法来获取每个连接的源和目标节点的所有sourceLinks和targetLinks

感谢所有的想法

---

谢谢。

我正在浏览sankey布局代码，发现了一个用于遍历布局节点的广度优先搜索实现。这里有一些关于BFS的知识-

纯粹基于此，下面是一个函数，用于在两个方向上高亮显示来自单击节点的所有路径-前进（目标）和后退（源）

希望这对别人有帮助

工作实例-

---

应该有帮助。谢谢@Larskothoff！这肯定会有所帮助，但我刚刚找到了解决方案，所以将其发布在这里。感谢@milen pavlov的格式设置！：）漂亮的问题，漂亮的答案。真的很好，但我注意到，如果你点击一个节点，那么悬停高亮显示似乎中断了。单击一个节点，然后再次单击（以关闭导线测量）。然后，“悬停”不适用于高亮显示的边。（Chrome，OSX）@schnee它现在修好了。相同的链接。悬停时，链接笔划不透明度将更改。但是，由于“单击高亮显示”将笔划不透明度应用于元素内嵌级别，因此未应用悬停样式。我现在已经做了

！重要信息

，以便始终将其考虑在内。通过css实现这一点是一个好办法。什么是节点[step.linkType]？step.linkType返回“sourceLinks”或“targetLinks”，但什么是节点[sourceLinks]？我一直为这行代码“未定义”。@ DaOLAM考虑“SysLeNKS”或“TraveLink”，如树状分支，它们分别为单击节点的源和目标提供节点。如果你能给我们指一把小提琴，那就好了。否则，我假设您案例中的“节点”没有指向正确的数据集/基准。

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

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