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

如果你使用directed eles.bfs()，你可以构建一个访问过的元素数组——也许是基于深度的限制列表。

于 2014-08-13T14:18:05.563 回答