问题描述
我在 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","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",{
data: {
id: "n13"
}
},{
data: {
id: "n14"
}
},{
data: {
id: "n15"
}
},{
data: {
id: "n16"
}
}
],edges: [{
data: {
source: "n0",target: "n1"
}
},{
data: {
source: "n1",target: "n2"
}
},target: "n3"
}
},{
data: {
source: "n2",target: "n7"
}
},target: "n11"
}
},target: "n16"
}
},{
data: {
source: "n3",target: "n4"
}
},{
data: {
source: "n4",target: "n5"
}
},target: "n6"
}
},{
data: {
source: "n6",target: "n8"
}
},{
data: {
source: "n8",target: "n9"
}
},target: "n10"
}
},{
data: {
source: "n11",target: "n12"
}
},{
data: {
source: "n12",target: "n13"
}
},{
data: {
source: "n13",target: "n14"
}
},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>好的，我可能已经找到了答案，显然节点和边是分开处理的。为了包含边，可以在 Cytoscape.js page under traversing 上找到几个选项，例如 nodes.edgesWith()、nodes.edgesTo()、nodes.connectedEdges() 等等等等
因此，例如，为了根据我的情况使用 Edge Successors 按节点和对应的 Edge 过滤，可以执行以下操作：
// Filter all nodes by nodeType Car
const query = 'node[ nodeType = "Car"]';
let filteredNodes = cy.nodes(query);
// I only want to successors of all Nodes,so I add only those and combine
nodes and edges with union
const graphElements = filteredNodes.union(filteredNodes.successors());
// Apply changes on graph
cy.elements().remove();
cy.add( graphElements );
这就是我想出来的，如果有人有什么要优化的，请告诉我。我还在自己摸索 Cytoscape.js。