Question

我使用网格布局在cytoscape js中创建了一个图形，并为每个节点指定了行和列。

然而，渲染的图形非常缩小，节点之间的间距非常大。我通过指定网格布局的行数和列数来部分解决了这个问题（请参阅picture。虽然不希望指定行数和列数，因为图表的大小可能会发生变化。

结果图（指定行和列时）仍然不是最佳的，节点仍然渲染得太小，水平间的距离仍然很大。

是否有指定网格单元格之间的距离？

我目前的网格布局代码如下：

layout: {
    name: 'grid',
    padding: 30,
    rows: 20,
    columns: 10,
    fit: true,
    position: function( node ){ return {row:node.data('row'), col:node.data('col')}; } 
  }

Answer 1

grid布局会自动使用节点的维度和可用空间来定位图表中的节点。如果您正在寻找新功能，请file an issue描述您想要的功能。

感谢您使用Cytoscape.js。

Answer 2

这可能是肮脏的黑客，但它对我有用。只需在网格布局的cytoscape代码中找到函数：

GridLayout.prototype.run

在此函数中找到如下行：

var cellWidth = bb.w / cols;
var cellHeight = bb.h / rows;

只需向cellWidth和cellHeight添加一些乘数，如下所示：

var cellWidth = bb.w / cols * 2.5;
var cellHeight = bb.h / rows / 4;

您还可以提取布局参数等乘数。

如何在cytoscape js中设置网格中单元格之间的距离？

2 个答案: