使用cola.js和Cytoscape的Y轴力
我注意到使用Cola.js (使用Cytoscape.js)，我的大多数布局倾向于形成一个正方形布局，而不是使用我的边界框，它更宽而不是高。
我一直在四处寻找，找到了d3-force，它有一个转换正方形布局(https://bl.ocks.org/steveharoz/8c3e2524079a8c440df60c1ab72b5d03)的forceY选项：
到这个更宽的布局：
我真的很想为Cola.js做同样的事情，但是我一直在努力做到这一点，并尝试了所有可能的选项，比如设置边界框，禁用缩放等。这可能吗？
我找到了一个Cola.js的演示，它提供了一些我需要的东西，但无法在Cytoscape.js中运行：https://ialab.it.monash.edu/webcola/examples/pageBoundsConstraints.html
回答 1
Stack Overflow用户
发布于 2020-09-14 19:35:29
根据您提供的链接，您可以对cola.js应用类似的功能。您需要锁定两个虚拟节点(一个用于左上角，另一个用于右下角)，然后适当地为所有其他节点添加约束。您可以禁用虚拟节点的可见性(我将它们保留为可见，以便我们可以看到边界框的左上角和右下角)。可以使用虚拟节点的位置来调整边界框。
var cy = window.cy = cytoscape({
container: document.getElementById('cy'),
style: [{
selector: 'node',
css: {
'content': 'data(id)',
'text-valign': 'center',
'text-halign': 'center'
}
},
{
selector: 'edge',
css: {
'curve-style': 'straight',
}
}
],
layout: {
name: 'preset'
},
elements: {
nodes: [{
data: {
id: 'n0'
}
},
{
data: {
id: 'n1'
}
},
{
data: {
id: 'n2'
}
},
{
data: {
id: 'n3'
}
},
{
data: {
id: 'n4'
}
},
{
data: {
id: 'd0'
},
position: {x: 0, y:0}
},
{
data: {
id: 'd1'
},
position: {x: 400, y:150}
}
],
edges: [{
data: {
id: 'n0n1',
source: 'n0',
target: 'n1'
}
},
{
data: {
id: 'n1n2',
source: 'n1',
target: 'n2'
}
},
{
data: {
id: 'n2n3',
source: 'n2',
target: 'n3'
}
},
{
data: {
id: 'n4n1',
source: 'n4',
target: 'n1'
}
}
]
}
});
var tl = cy.getElementById('d0');
var br = cy.getElementById('d1');
tl.lock();
br.lock();
var realGraphNodes = cy.nodes().difference(tl.union(br));
var constraints = [];
for (var i = 0; i < realGraphNodes.length; i++) {
constraints.push({ axis: 'x', left: tl, right: realGraphNodes[i], gap: 100 });
constraints.push({ axis: 'y', left: tl, right: realGraphNodes[i], gap: 100 });
constraints.push({ axis: 'x', left: realGraphNodes[i], right: br, gap: 100 });
constraints.push({ axis: 'y', left: realGraphNodes[i], right: br, gap: 100 });
}
cy.layout({name: 'cola', randomize: true, animate: false, gapInequalities: constraints}).run();body {
font: 14px helvetica neue, helvetica, arial, sans-serif;
}
#cy {
height: 95%;
width: 95%;
left: 0;
top: 0;
position: absolute;
}<html>
<head>
<meta charset=utf-8 />
<meta name="viewport" content="user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, minimal-ui">
<script src="https://unpkg.com/cytoscape@3.10.0/dist/cytoscape.min.js"></script>
<script src="https://unpkg.com/webcola/WebCola/cola.min.js"></script>
<script src="https://unpkg.com/cytoscape-cola/cytoscape-cola.js"></script>
</head>
<body>
<div id="cy"></div>
</body>
</html>
https://stackoverflow.com/questions/63841671
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号