filter - 如何获得边缘以及我在 Cytoscape.js 中过滤的节点?
问题描述
我想知道如何获得边缘以及我根据特定查询过滤的所有节点?
我在 Cytoscape.js 页面上看到了这个例子: https ://js.cytoscape.org/#selectors
// get node j and the edges coming out from it
cy.elements('node#j, edge[source = "j"]');
现在我想对所有节点以及所有边都具有的特定查询属性执行相同的操作。
我尝试按照上述想法进行查询,如下所示:
const query = 'node[ nodeType = "Car"]';
graphElements = cy.elements(query);
这给了我所有 nodeType="Car" 但没有边的节点。如何获取所有边以及选定的节点查询?
解决方案
为了过滤具有连接边的节点,您可以将.remove()
函数与函数一起使用.not()
,从而删除不在提供的集合中的每个节点,以及来自和到不在集合中的节点的每条边:
var cy = (window.cy = cytoscape({
container: document.getElementById("cy"),
boxSelectionEnabled: false,
autounselectify: true,
style: [{
selector: "node",
css: {
content: "data(id)",
"text-valign": "center",
"text-halign": "center",
height: "60px",
width: "60px",
"border-color": "black",
"border-opacity": "1",
"border-width": "10px"
}
},
{
selector: "$node > node",
css: {
"padding-top": "10px",
"padding-left": "10px",
"padding-bottom": "10px",
"padding-right": "10px",
"text-valign": "top",
"text-halign": "center",
"background-color": "#bbb"
}
},
{
selector: "edge",
css: {
"target-arrow-shape": "triangle"
}
},
{
selector: ":selected",
css: {
"background-color": "black",
"line-color": "black",
"target-arrow-color": "black",
"source-arrow-color": "black"
}
}
],
elements: {
nodes: [{
data: {
id: "n0"
}
},
{
data: {
id: "n1"
}
},
{
data: {
id: "n2"
}
},
{
data: {
id: "n3",
type: "car"
}
},
{
data: {
id: "n4"
}
},
{
data: {
id: "n5"
}
},
{
data: {
id: "n6"
}
},
{
data: {
id: "n7"
}
},
{
data: {
id: "n8"
}
},
{
data: {
id: "n9"
}
},
{
data: {
id: "n10"
}
},
{
data: {
id: "n11"
}
},
{
data: {
id: "n12",
type: "car"
}
},
{
data: {
id: "n13"
}
},
{
data: {
id: "n14"
}
},
{
data: {
id: "n15"
}
},
{
data: {
id: "n16"
}
}
],
edges: [{
data: {
source: "n0",
target: "n1"
}
},
{
data: {
source: "n1",
target: "n2"
}
},
{
data: {
source: "n1",
target: "n3"
}
},
{
data: {
source: "n2",
target: "n7"
}
},
{
data: {
source: "n2",
target: "n11"
}
},
{
data: {
source: "n2",
target: "n16"
}
},
{
data: {
source: "n3",
target: "n4"
}
},
{
data: {
source: "n3",
target: "n16"
}
},
{
data: {
source: "n4",
target: "n5"
}
},
{
data: {
source: "n4",
target: "n6"
}
},
{
data: {
source: "n6",
target: "n8"
}
},
{
data: {
source: "n8",
target: "n9"
}
},
{
data: {
source: "n8",
target: "n10"
}
},
{
data: {
source: "n11",
target: "n12"
}
},
{
data: {
source: "n12",
target: "n13"
}
},
{
data: {
source: "n13",
target: "n14"
}
},
{
data: {
source: "n13",
target: "n15"
}
}
]
},
layout: {
name: "dagre",
padding: 5
}
}));
cy.off("click");
cy.on("click", function(event) {
let filteredNodes = cy.nodes('node[ type = "car"]');
cy.nodes().not(filteredNodes.union(filteredNodes.successors())).remove();
});
body {
font: 14px helvetica neue, helvetica, arial, sans-serif;
}
#cy {
height: 100%;
width: 75%;
position: absolute;
left: 0;
top: 0;
float: left;
}
<html>
<head>
<meta charset=utf-8 />
<meta name="viewport" content="user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, minimal-ui">
<script src="https://cdnjs.cloudflare.com/ajax/libs/cytoscape/3.2.17/cytoscape.min.js"></script>
<script src="https://unpkg.com/jquery@3.3.1/dist/jquery.js"></script>
<script src="https://unpkg.com/dagre@0.7.4/dist/dagre.js"></script>
<script src="https://cdn.rawgit.com/cytoscape/cytoscape.js-dagre/1.5.0/cytoscape-dagre.js"></script>
</head>
<body>
<div id="cy"></div>
</body>
</html>
推荐阅读
- google-chrome - 从 Visual Basic 关闭 chrome 配置文件
- javascript - 无法从联系表单向 Firebase 提交数据
- android - 如何更改 Android EditText 视图上 blob 的颜色?
- python - 尝试使用 python-ldap ldifparser 解析 ldif 文件
- typescript - 重载签名不兼容函数实现没有意义
- javascript - 如何使 Chrome 92 从不同子域上打开的 iframe 显示 alert()、prompt() 和 confirm()
- python - 我收到 ERROR: AttributeError at /customer/5/ type object 'Customer' has no attribute 'orderitem_set'
- python - 如何在 KivyMD 的 .kv 文件中使用 kivy 中的数据表?
- php - 用于编辑和添加送货地址的 Woocommerce 简码
- openfoam - 泡沫致命错误 (openFoam-2012) [U[0 1 -2 0 0 0 0] ] == [-grad(p)[0 -3 -2 0 0 0 0] ]