这里我有一个简单的图表来演示这个问题:
var cy = cytoscape({
container: document.getElementById("stage"),
elements: [{
data: {id: "a", value: 0}
}, {
data: {id: "b", value: 1}
}, {
data: {id: "ab", source: "a", target: "b", weight: 10}
}, {
data: {id: "c", value: 2}
}],
style: [{
selector: "node",
style: {
content: "data(id)",
"text-valign": "center",
color: "white",
"background-color": "mapData(value, 0, 2, red, blue)"
}
}],
layout: {
name: "cose"
}
});
由于某种原因,如果我在两个节点之间添加一条边,这两个节点将折叠在一起(放置在彼此之上)。继CoSE demo on GitHub我不知道为什么会发生这种情况。有什么想法吗?
问题演示:https://jsfiddle.net/DerekL/mthg1uv5/
应该有三个节点:a
、b
和c
,但是a
和b
放置在彼此的顶部。将节点 b
拖出,您可以在其下方看到节点 a
。
最佳答案
不确定这是否能满足您的要求,但打开随机化似乎可以解决该问题。
像这样:
layout: {
name: "cose",
randomize: true
}
您还可以通过更改布局类型来修复它 - 我尝试了“宽度优先”,但没有出现问题。我不太精通解释为什么 cose 不能按您的意愿工作,但希望这会有所帮助。根据我的研究,每个人似乎都称赞 cose-bilkent 布局作为 cose 的替代方案,因此可能值得看看它是否能满足您的需求。
关于javascript - 使用 CoSE 布局添加边缘折叠节点,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40813654/