使用 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
}

您也可以通过更改布局类型来修复它 - 我试过 'breadthfirst' 但没有问题。我不够精通，无法解释为什么 cose 无法按您的意愿工作，但希望这会有所帮助。从我的研究来看，每个人似乎都称赞 cose-bilkent 布局作为 cose 的替代品，因此可能值得一看它是否能满足您的需求。

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

Adding edge collapses nodes with CoSE layout

javascript

cytoscape.js