是否有一种方法可以在忽略某些将被自定义动画删除的节点的同时重新渲染布局？
cy.layout(
{
name: "dagre",rankDir: "LR",spacingFactor: 1,animate: true,animationDuration: 5000,rankSep: 200,}).run();
setTimeout(() => {
cy.elements()[2].animate(
{
style: {
opacity: 0
}
},{
duration: 5000
);
},5000);
cy.layout(
{
name: "dagre",}).run();
我要在重新渲染不包含此节点的布局时过滤正在设置动画的节点
首先，您可以随时通过调用所需集合上的布局函数来run layouts on subsets of the elements：
cy.elements().layout({...})
此外，您可以通过断言两个集合之间的差异来filter out specific elements：
cy.elements().not(filterOutElements)
如果将它们放在一起，应该会得到以下内容：
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: "edge",css: {
"target-arrow-shape": "triangle"
}
}
],elements: {
nodes: [{
data: {
id: "n0"
}
},{
data: {
id: "n1"
}
},{
data: {
id: "n2"
}
},{
data: {
id: "n3"
}
},{
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.elements().layout({
name: "dagre",rankDir: "LR",spacingFactor: 1,animate: true,animationDuration: 5000,rankSep: 200
}).run();
setTimeout(() => {
cy.elements()[0].animate({
style: {
opacity: 0
}
},{
duration: 5000
});
cy.elements().not(cy.elements()[0]).layout({
name: "dagre",rankSep: 200
}).run();
});body {
font: 14px helvetica neue,helvetica,arial,sans-serif;
}
#cy {
height: 100%;
width: 100%;
left: 0;
top: 0;
float: left;
position: absolute;
}<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://unpkg.com/cytoscape@3.3.0/dist/cytoscape.min.js">
</script>
<script src="https://unpkg.com/jquery@3.3.1/dist/jquery.js"></script>
<!-- cyposcape dagre -->
<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>