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

Question

我刚修改了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'”的其他信息，单击节点时如何显示？

提前致谢！

Answer 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()功能中。

希望我有足够的帮助/清楚。

Answer 2

如果您使用定向eles.bfs()，则可以构建一个受访元素数组 - 可能会根据深度限制列表。