Question

我是Cytoscape.js的新手，我正在尝试使网格布局正常工作。我有以下格式的九个节点：

{ 
  data: {
    id: 'a1',
    name:'CCDS 4.1 (new)',
    width: 0,
    color: '#BD4A3B'
  },
  position: {
    x: 1,
    y: 0
  },
  group: 'nodes'
}

我希望它会显示在网格的第二行第一列。

我还指定了以下布局选项。

layout: {
  name: 'grid',
  position: function(node) { return node.position; }
}

不过，我得到的输出不符合我的任何网格位置，只是创建了5个节点的行和4个节点的行。我也尝试了不使用上面的position选项，但这似乎无济于事。我知道我缺少一些简单的东西... :)感谢您的帮助！

Answer 1

position用 {x，y} 术语指节点的location，即屏幕/视口上的position。这是position http://js.cytoscape.org/#notation/position的文档。

您必须在数据中指定row和column并使用ele.data(...)

进行访问

{ 
  data: {
    id: 'a1',
    name:'CCDS 4.1 (new)',
    width: 0,
    color: '#BD4A3B',
    row: 1,
    col: 0
  },
  group: 'nodes'
}

您可以在布局选项中设置row和column

layout: {
  name: 'grid',
  position: function(node) { 
    return {
     row: node.data('row'),
     col: node.data('col')
    } 
  }
}

Cytoscape.js网格布局不使用网格位置

1 个答案: