javascript - 仅选择父节点的子节点，并从图中(暂时)消除 cytoscape.js 中的所有其他节点

Question

我刚刚修改了 cytoscape.js 的示例(“动画 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。我从来没有需要操纵 child ，但我认为可以通过使用 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() 函数中。

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