javascript - 使用 CoSE 布局添加边缘折叠节点

Question

这里我有一个简单的图表来演示这个问题:

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。

Answer 1

不确定这是否能满足您的要求，但打开随机化似乎可以解决该问题。

像这样:

layout: {
    name: "cose",
    randomize: true
}

您还可以通过更改布局类型来修复它 - 我尝试了“宽度优先”，但没有出现问题。我不太精通解释为什么 cose 不能按您的意愿工作，但希望这会有所帮助。根据我的研究，每个人似乎都称赞 cose-bilkent 布局作为 cose 的替代方案，因此可能值得看看它是否能满足您的需求。