仅选择父节点的子节点，并从图中（暂时）消除 cytoscape.js 中的所有其他节点答案

【问题标题】：Select just the child nodes of a parent node, and eliminate (temporarily) from the graph all other nodes in cytoscape.js仅选择父节点的子节点，并从图中（暂时）消除 cytoscape.js 中的所有其他节点
【发布时间】：2014-10-05 18:17:03
【问题描述】：

我刚刚修改了 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 中我该怎么做：

选择节点“a”并让所有子节点保持显示状态，而其他节点消失。
如果我想要孩子 + 'a' 的孙子，命令会有所不同吗？
还有，我最后一个问题：在节点'a'中我有一些关于节点“addinf:'sometext'”的附加信息，如何在节点被点击时也显示出来？

提前致谢！

【问题讨论】：

标签： javascript cytoscape.js cytoscape cytoscape-web

【解决方案1】：

1 和 2。我从来不需要操纵孩子，但我认为可以通过使用eles.depthFirstSearch() 函数来做到这一点；您可以将深度设置为 1 以获取直接子级，或者您想要的任何数量。检查this documentation。

3。就个人而言，我更喜欢创建一个名为clickInNode() 的函数，当一个节点被选中时，我可以在其中做一些事情。然后，要调用它，我使用：

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

如果您有一个 ID 为 nodedata 的文本框，并希望用来自节点的 addinf 数据填充它，那么您可以使用：

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

在您的 clickInNode() 函数中。

希望我已经足够有帮助/清楚了。

【讨论】：

【解决方案2】：

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

【讨论】：