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

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在屏幕/视口(viewport)上。这是position http://js.cytoscape.org/#notation/position 的文档.

您必须指定数据中的行和列并使用ele.data(...)

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

并且您可以在布局选项中设置行和列

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