如何获得边缘以及我在 Cytoscape.js 中过滤的节点?
How do I get edges along with the nodes I filtered in 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" 但没有边的所有节点。
我怎样才能得到所有边以及选定的节点查询?
好的,我可能已经找到了答案,显然节点和边是分开处理的。为了包含边缘,可以在 Cytoscape.js page under traversing 上找到几个选项,例如 nodes.edgesWith()、nodes.edgesTo(), nodes.connectedEdges(),等等等等
因此,例如,为了根据我的需要按节点和相应的边过滤 Successors,可以执行以下操作:
// 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。
为了过滤具有连接边的节点,可以将.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>
我想知道如何获取边缘以及根据特定查询过滤的所有节点?
我在 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" 但没有边的所有节点。 我怎样才能得到所有边以及选定的节点查询?
好的,我可能已经找到了答案,显然节点和边是分开处理的。为了包含边缘,可以在 Cytoscape.js page under traversing 上找到几个选项,例如 nodes.edgesWith()、nodes.edgesTo(), nodes.connectedEdges(),等等等等
因此,例如,为了根据我的需要按节点和相应的边过滤 Successors,可以执行以下操作:
// 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。
为了过滤具有连接边的节点,可以将.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>