Cytoscape JS 中是否有查找和过滤功能的示例或示例代码

Question

我在 cytoscape 应用程序中看到我们具有按关键字和程度查找和过滤等功能。我按照原始文档尝试了一种解决方法。 Here you can see the demo webdemo.intolap.com/cytoscape（查看源代码或片段）。过滤器部分工作良好。例如，"apple" 将显示 apple 及其连接的节点（第 1 级）正是我正在寻找的。

但我面临的问题是重新设置图形并使用不同的关键字。清除文本框然后输入不同的关键字后，过滤功能似乎不起作用。

我的意思是当我清除文本框时，它会将图形重置为正确的原始图形。我使用恢复图形的 init() 函数来做到这一点。但是如果我搜索 "Ball" 过滤器就不起作用。请任何帮助。谢谢！

Answer 1

其实在官方文档中有一个相当不错的解释here，但说实话，一开始我也很纠结这个功能：

基本上，您只需插入过滤查询即可过滤要搜索的特定集合。所以如果你想过滤所有节点，你可以使用这个：

cy.nodes(filterQuery);

如果你想过滤所有元素，只需要这样调用：

cy.elements(filterQuery);

如果你想让它变得简单，你可以使用这个简短的版本（cy.filter(...) 的缩写）：

cy.$(filterQuery);

过滤器查询本身并没有那么难，你可以这样做（假设你有一个id为"first"的节点或一个类似nodeColor“#2763c4”的属性）：

cy.$('[id != "first"]');
cy.$('[id = "first"]');
cy.$('[nodeColor = "#2763c4"]');
cy.$('[weight > 50]');

此外，您可以像这样在过滤器查询中指定目标集合：

cy.$('node[id != "first"]');

最后，如果您需要复杂的过滤，您可以使用函数将该逻辑应用于过滤器，为此只需这样做：

cy.$(function(element, i){
  return element.isNode() && element.data('weight') > 50;
});

Answer 2

听起来你正试图 cy.filter 在一个 cytoscape 实例上，但此时已不存在。这就是为什么它第一次有效，但第二次无效（在您恢复图形之后，这可能意味着销毁和创建）。

您需要确保将过滤器处理程序指向活动的 cytoscape 实例。

Cytoscape JS 中是否有查找和过滤功能的示例或示例代码

Is there any example or sample code for the find and filter feature in Cytoscape JS

cytoscape.js