如何使用 cy.load 设置 cytoscape.js 中节点的起始位置？答案

【问题标题】：How can I set the start position of nodes in cytoscape.js with cy.load?如何使用 cy.load 设置 cytoscape.js 中节点的起始位置？
【发布时间】：2013-10-21 01:56:58
【问题描述】：

我正在尝试手动设置节点的起始位置，但从 JSON 结构中加载它们。如果我将位置放在“节点”结构中，它可以工作，但是我正在尝试添加一个名为“位置：”的单独结构，我认为应该可以吗？请参阅下面的结构示例。

var graphdata = { nodes: [ { data: { id: 'j', name: 'Jerry', width: 20, height: 20 ,     shape: 'rectangle' }},
                       { data: { id: 't', name: 'Tom', width: 20 , height: 20, shape: 'circle' } },
                       { data: { id: 'm', name: 'Mary', width: 20 , height: 20, shape: 'circle' } } ,
                       { data: { id: 'b', name: 'Bob', width: 20 , height: 20, shape: 'circle' } } ],

              edges: [
                      { data: { source: 'j', target: 't', faveColor: '#6FB1FC', strength: 90 } },
                      { data: { source: 't', target: 'm', faveColor: '#6FB1FC', strength: 90 } },
                      { data: { source: 'm', target: 'b', faveColor: '#6FB1FC', strength: 90 } } ],

             positions: [ { j: { x:100,y:100 } }, 
                          { t: { x:100,y:200 } } ]

稍后我打电话 cy.load（图形数据）。

节点和边显示正常，但位置似乎完全没有受到影响。

我还加载了预设布局。

谢谢。

【问题讨论】：

标签： javascript cytoscape.js cytoscape-web cytoscape

【解决方案1】：

这是 Cytoscape Web 还是 Cytoscape.js？

在 Cytoscape.js 中，

只需在每个元素中指定 init 的位置 (http://cytoscape.github.io/cytoscape.js/#core/initialisation)，或者
在预设布局选项中指定位置并在初始化时使用该布局 (http://cytoscape.github.io/cytoscape.js/#core/initialisation)。

【讨论】：

它的 Cytoscape.js。我可以在每个工作元素中指定位置，但我不能在上面的示例中做我想做的事情。
您必须在每个元素中指定位置或使用预设布局。
我必须将布局属性设置为属性名称为 'preset': layout: { name: 'preset' },
将布局名称更改为“preset”，然后将考虑初始位置值。但是，如果动态添加一些新节点和边来绘制图形，然后运行类似 cose-bilkent 的布局，如果在所有节点上运行，所有节点都将重新定位，如果在新节点上运行，则可能会发生重叠。如何解决这个问题？

【解决方案2】：

将布局名称更改为“预设”，然后将考虑位置值。参考 - http://js.cytoscape.org/#layouts/preset

【讨论】：