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布局添加边缘折叠节点

1 个答案: