我创建了一个 "多实例 "的变体 (https:/js.cytoscape.orgdemos310dca83ba6970812dd0。)，其中，不是在开始时添加所有实例，而是每次点击文档时都会添加一个新的DIV容器和一个cytoscape实例。
<!DOCTYPE html>
<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">
<title>Multiple instances</title>
<script src="https://js.cytoscape.org/js/cytoscape.min.js"></script>
</head>
<body>
<script>
var elesJson = {
nodes: [
{ data: { id: 'a', foo: 3, bar: 5, baz: 7 } },
{ data: { id: 'b', foo: 7, bar: 1, baz: 3 } },
{ data: { id: 'c', foo: 2, bar: 7, baz: 6 } },
{ data: { id: 'd', foo: 9, bar: 5, baz: 2 } },
{ data: { id: 'e', foo: 2, bar: 4, baz: 5 } }
],
edges: [
{ data: { id: 'ae', weight: 1, source: 'a', target: 'e' } },
{ data: { id: 'ab', weight: 3, source: 'a', target: 'b' } },
{ data: { id: 'be', weight: 4, source: 'b', target: 'e' } },
{ data: { id: 'bc', weight: 5, source: 'b', target: 'c' } },
{ data: { id: 'ce', weight: 6, source: 'c', target: 'e' } },
{ data: { id: 'cd', weight: 2, source: 'c', target: 'd' } },
{ data: { id: 'de', weight: 7, source: 'd', target: 'e' } }
]
};
var count = 1;
// add new container and cytoscape instance
document.onclick = function () {
var t = (count - 1) * 20;
// first, add the container
document.body.innerHTML += `<div id="cy${count}" style="position: absolute; left: 0; top: ${t}%; width: 100%; height: 20%; z-index: 999;"></div>`
// then, add the cytoscape instance
cytoscape({
container: document.getElementById(`cy${count}`),
style: cytoscape.stylesheet()
.selector('node')
.css({
'background-color': '#B3767E',
'width': 'mapData(baz, 0, 10, 10, 40)',
'height': 'mapData(baz, 0, 10, 10, 40)',
'content': 'data(id)'
})
.selector('edge')
.css({
'line-color': '#F2B1BA',
'target-arrow-color': '#F2B1BA',
'width': 2,
'target-arrow-shape': 'circle',
'opacity': 0.8
})
.selector(':selected')
.css({
'background-color': 'black',
'line-color': 'black',
'target-arrow-color': 'black',
'source-arrow-color': 'black',
'opacity': 1
})
.selector('.faded')
.css({
'opacity': 0.25,
'text-opacity': 0
}),
elements: elesJson,
layout: {
name: 'circle',
padding: 10
},
ready: function(){
// ready 1
}
});
// increment
count++;
}
</script>
</body>
</html>
我的期望是新实例出现在旧实例的下方，但事实并非如此。
相反，新的实例出现在预期的位置，而旧的实例却消失了。旧实例的容器仍然在DOM中。
我找不到对这种行为的解释，尤其是所有其他的东西都和原来的例子一样。我到底做错了什么？
Cytoscape实例仍然存在，但是这些实例所连接的DOM元素被新的元素所取代，因为你改变了整个Cytoscape系统。body.innerHTML.
所以，基本上，而不是
document.body.innerHTML += `<div id="cy${count}" style="position: absolute; left: 0; top: ${t}%; width: 100%; height: 20%; z-index: 999;"></div>`
你应该这样做
let newCytoscapeInstanceContainer = document.createElement('div');
newCytoscapeInstanceContainer.id = `cy${count}`;
newCytoscapeInstanceContainer.style.cssText = `position: absolute; left: 0; top: ${t}%; width: 100%; height: 20%; z-index: 999;`;
document.body.appendChild(newCytoscapeInstanceContainer);
或使用 cy.mount() 将之前的Cytoscape实例绑定到新的DOM元素上，但我并不推荐。