0

cytoscape.js (「Animated BFS」) のサンプルを変更し、いくつかのノードを追加しました。

$(function(){ // on dom ready
$('#cy').cytoscape({
style: cytoscape.stylesheet()
.selector('node')
  .css({
    'content': 'data(id)',
    'background-color': 'data(myColor)'
  })
.selector('edge')
  .css({
    'target-arrow-shape': 'triangle',
    'width': 2,
    'line-color': '#ddd',
    'target-arrow-color': '#ddd'
  }),


elements: {
  nodes: [
    { data: { id: 'a', myColor: '#035530', addinf: 'sometext' } },
    { data: { id: 'b' } },
    { data: { id: 'c' } },
    { data: { id: 'd' } },
    { data: { id: 'e' } },
    { data: { id: 'ABC', myColor: '#CBB089' } },
    { data: { id: 'DEF', myColor: '#C0E234' } },
    { data: { id: 'GHI', myColor: '#C0E234' } },
    { data: { id: 'JKL', myColor: '#C0E234' } },
    { data: { id: 'MNO', myColor: '#C0E234' } },
    { data: { id: 'PQR', myColor: '#C0E234' } },
    { data: { id: 'STR', myColor: '#C0E234' } },
    { data: { id: 'ZXY', myColor: '#C0E234' } }

  ], 

  edges: [
    { data: { id: 'a"e', weight: 2, source: 'a', target: 'e' } },
    { data: { id: 'ab', weight: 3, source: 'a', target: 'b' } },
    { data: { id: 'be', weight: 4, source: 'b', target: 'e' } },
    { data: { id: 'bc', weight: 5, source: 'b', target: 'c' } },
    { data: { id: 'ce', weight: 6, source: 'c', target: 'e' } },
    { data: { id: 'cd', weight: 2, source: 'c', target: 'd' } },
    { data: { id: 'de', weight: 7, source: 'd', target: 'e' } },
    { data: { id: 'S', source:'a', target: 'ABC'}},
    { data: { id: '1', source:'a', target: 'DEF'}},
    { data: { id: '2', source:'b', target: 'GHI'}},
    { data: { id: '3', source:'e', target: 'JKL'}},   
    { data: { id: '4', source:'c', target: 'MNO'}},   
    { data: { id: '5', source:'d', target: 'PQR'}},   
    { data: { id: '6', source:'a', target: 'STR'}},   
    { data: { id: '7', source:'ABC', target: 'ZXY'}}
  ]
},

layout: {
name: 'breadthfirst',
directed: true,
fit: true,
maximalAdjustments: 10,
nodeRepulsion       : 1000,
nodeOverlap         : 10,
roots: '#a',
padding: 10
},

hideEdgesOnViewport: true,


ready: function(){
window.cy = this;

}

});


}); // on dom ready

そして、これは私が取得した結果のグラフです（手動でキュレーションしました）：） 結果のグラフしたがって、たとえばノード「a」を選択したいだけで（クリックするか、ユーザー入力で変数に保存します）、すべての子が残るはずです表示されますが、他のすべては一時的に消えます。次のような写真が残っています。 ノードを選択した後の結果

Cytoscape.js では、どうすればそれを行うことができますか:

  1. ノード「a」を選択し、すべての子ノードを表示したままにして、他のノードを非表示にします。
  2. そして、「a」の子+孫が必要な場合、コマンドは異なりますか?
  3. また、私の最後の質問: ノード 'a' には、ノード "addinf: 'sometext'" に関する追加情報があります。

前もって感謝します！

4

2 に答える 2

2

1と2。eles.depthFirstSearch()子を操作する必要はありませんでしたが、関数を使用することで可能だと思います。深さを 1 に設定して、直接の子を取得するか、任意の量を設定できます。このドキュメントを確認してください。

3 . clickInNode()個人的には、ノードが選択されたときに何かを実行できるという名前の関数を作成することを好みました。次に、それを呼び出すには、次を使用します。

var nodeClicked = cy.on('tap', 'node', function(e) {
        clickInNode(e.cyTarget);
    });

ID付きのテキストボックスがあり、ノードからnodedataのデータを入力したいaddinf場合は、次を使用できます。

$('#nodedata').val(node.data('addinf'));

clickInNode()関数内。

私が役に立てば幸いです/十分に明確です。

于 2014-08-12T18:04:00.577 に答える
1

direct を使用するeles.bfs()と、訪問した要素の配列を作成できます。おそらく、深さに基づいてリストを制限します。

于 2014-08-13T14:18:05.563 に答える