d3.js – d3 Sankey – 从头到尾突出显示所有连接的路径

前端之家收集整理的这篇文章主要介绍了d3.js – d3 Sankey – 从头到尾突出显示所有连接的路径前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我试图突出显示其目标节点的所有连接链接链接,直到布局结束.

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

在节点单击时,调用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.目标节点.

所有的想法都很感激!

谢谢.

解决方法

我正在浏览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);
}

猜你在找的JavaScript相关文章