d3 Sankey - 从开始到结束突出显示所有连接的路径 [英] d3 Sankey - Highlight all connected paths from start to end

问题描述

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

I'm trying to highlight all the connected links and links of their target nodes till the end of the layout.

第一级突出显示可以轻松实现如下 -

The first level of highlighting can be easily achieved as follows -

在节点单击时，调用 highlight_paths（1）;

On node click, call 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);
        });
    }
}

但我还无法正确写入递归算法以获得每个连接的源和目标的所有源链接和目标链接。目标节点。

But I'm not yet able to write correctly a recursive algorithm to get all the sourceLinks and targetLinks of each of the connected source & target nodes.

感谢所有人的意见！

谢谢。

推荐答案

我正在浏览sankey布局代码，发现了一个用于遍历布局节点的宽度优先搜索实现。有关BFS的一些知识 - http：//www.cse。 ohio-state.edu/~gurari/course/cis680/cis680Ch14.html

I was going through the sankey layout code and found a Breadth First Search implementation for traversing the layout nodes. Some knowledge on BFS here - http://www.cse.ohio-state.edu/~gurari/course/cis680/cis680Ch14.html

纯粹基于这一点，这里是突出显示所有路径的函数点击的节点 - 向前（目标）和向后（源）

Purely based on that, here is the function to highlight all the paths from the clicked node in both the directions - Forward ( Target ) and Backward (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);
}

这篇关于d3 Sankey - 从开始到结束突出显示所有连接的路径的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！