10

レイアウトの最後まで、接続されているすべてのリンクとそのターゲット ノードのリンクを強調表示しようとしています。

強調表示の最初のレベルは、次のように簡単に実現できます。

ノードのクリック時に、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 を取得するための再帰アルゴリズムを正しく記述することはまだできていません。

すべての考えは大歓迎です！

ありがとう。

4

1 に答える 1

21

私は sankey レイアウト コードを調べていて、レイアウト ノードをトラバースするための幅優先探索の実装を見つけました。BFS に関する知識はこちら - http://www.cse.ohio-state.edu/~gurari/course/cis680/cis680Ch14.html

純粋にそれに基づいて、クリックされたノードからのすべてのパスを両方の方向で強調表示する機能があります-前方（ターゲット）と後方（ソース）

これが誰かを助けることを願っています!

実施例 -

http://bl.ocks.org/git-ashish/8959771

https://observablehq.com/@git-ashish/sankey-diagram

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);
}
于 2013-10-08T05:26:24.030 に答える