网格布局中Cytoscape间距不一致

时间:2019-05-09 18:33:24

标签: cytoscape.js

我正在使用cytoscape表示DAG,其中节点归类在复合节点下。复合节点的数量是固定的(4)。我想使该图即使对于许多节点也完全可见。从理论上讲这是可能的,因为总宽度不大(4列),并且父级内部的节点可以垂直排列成行。

为此,我一直使用这样的网格布局:

{
        name: 'grid',
        fit: false,
        nodeDimensionsIncludeLabels: true,
        condense: false,
        avoidOverlap: true,
        cols: 4,
        position: function(node) {
            let col, row;

            if (node.classes().includes('a')) {
                col = 0;
                row = aRow++;
            } else  if (node.classes().includes('b')) {
                col = 1;
                row = bRow++;
            } else  if (node.classes().includes('c')) {
                col = 2;
                row = cRow++;
            } else  if (node.classes().includes('d')) {
                col = 3;
                row = 0;
            }

            return {row: row, col: col};
        },
        sort: function(l, r) {
            return l.data('id').localeCompare(r.data('id'));
        }
    }

我为节点css设置了以下属性:

'height': 'label'
'width': 'label'

我希望对于不同的图形,父级组件之间的水平间距和同一父级内部的节点之间的垂直间距是相同的。不幸的是,事实并非如此。

此较大图形产生的间距看起来不错: enter image description here

但是对于这个较小的图,我不明白为什么这两个父节点最终如此接近以及为什么节点之间的填充如此之大:

enter image description here

我做错什么了吗?或者网格布局不适合这个?

0 个答案:

没有答案