Javascript Y轴力与cola.js和Cytoscape

我注意到，使用Cola.js（with Cytoscape.js）时，我的大多数布局倾向于形成方形布局，而没有使用我的边界框，因为它比高的边界框宽

我四处寻找，发现了

d3force

，它有一个

force

选项，可以转换正方形布局（）：

对于更宽的布局：

我真的很想为Cola.js做同样的事情，但是我一直在努力做到这一点，并尝试了所有可能的选项，如设置边界框、禁用缩放等。这有可能吗

---

我找到了一个Cola.js的演示，它提供了我需要的东西，但无法在Cytoscape.js中运行：

根据您提供的链接，您可以在Cola.js中应用类似的功能。您需要锁定两个虚拟节点（一个用于左上角，一个用于右下角），然后为所有其他节点适当添加约束。您可以禁用虚拟节点的可见性（我将它们保留为可见，以便可以看到边界框的左上角和右下角）。可以使用虚拟节点的位置来调整边界框

var cy=window.cy=cytoscape({
容器：document.getElementById（'cy'），
风格：[{
选择器：'节点'，
css:{
“内容”：“数据（id）”，
“text valign”：“center”，
“text halign”：“center”
}
},
{
选择器：'边'，
css:{
“曲线样式”：“直线”，
}
}
],
布局：{
名称：“预设”
},
要素：{
节点：[{
数据：{
id:'n0'
}
},
{
数据：{
id:'n1'
}
},
{
数据：{
id:'n2'
}
},
{
数据：{
id:'n3'
}
},
{
数据：{
id:'n4'
}
},      
{
数据：{
id:'d0'
},
位置：{x:0，y:0}
},
{
数据：{
id:‘d1’
},
位置：{x:400，y:150}
}    
],
边缘：[{
数据：{
id:'n0n1'，
资料来源：“n0”，
目标：“n1”
}
},
{
数据：{
id:'n1n2'，
来源：“n1”，
目标：“n2”
}
},
{
数据：{
id:'n2n3'，
资料来源：“n2”，
目标：“n3”
}
},
{
数据：{
id:'n4n1'，
资料来源：“n4”，
目标：“n1”
}
}
]
}
});
var tl=cy.getElementById（'d0'）；
var br=cy.getElementById（'d1'）；
tl.lock（）；
br.lock（）；
var realGraphNodes=cy.nodes（）.difference（tl.union（br））；
var约束=[]；
对于（var i=0；i
正文{
字体：14px helvetica neue，helvetica，arial，无衬线；
}
#赛义德{
身高：95%；
宽度：95%；
左：0；
排名：0；
位置：绝对位置；
}
根据您提供的链接，您可以在cola.js中应用类似的功能。您需要锁定两个虚拟节点（一个用于左上角，一个用于右下角），然后为所有其他节点适当添加约束。您可以禁用虚拟节点的可见性（我将它们保留为可见，以便可以看到边界框的左上角和右下角）。可以使用虚拟节点的位置来调整边界框


var cy=window.cy=cytoscape({
容器：document.getElementById（'cy'），
风格：[{
选择器：'节点'，
css:{
“内容”：“数据（id）”，
“text valign”：“center”，
“text halign”：“center”
}
},
{
选择器：'边'，
css:{
“曲线样式”：“直线”，
}
}
],
布局：{
名称：“预设”
},
要素：{
节点：[{
数据：{
id:'n0'
}
},
{
数据：{
id:'n1'
}
},
{
数据：{
id:'n2'
}
},
{
数据：{
id:'n3'
}
},
{
数据：{
id:'n4'
}
},      
{
数据：{
id:'d0'
},
位置：{x:0，y:0}
},
{
数据：{
id:‘d1’
},
位置：{x:400，y:150}
}    
],
边缘：[{
数据：{
id:'n0n1'，
资料来源：“n0”，
目标：“n1”
}
},
{
数据：{
id:'n1n2'，
来源：“n1”，
目标：“n2”
}
},
{
数据：{
id:'n2n3'，
资料来源：“n2”，
目标：“n3”
}
},
{
数据：{
id:'n4n1'，
资料来源：“n4”，
目标：“n1”
}
}
]
}
});
var tl=cy.getElementById（'d0'）；
var br=cy.getElementById（'d1'）；
tl.lock（）；
br.lock（）；
var realGraphNodes=cy.nodes（）.difference（tl.union（br））；
var约束=[]；
对于（var i=0；i