Question

如果我使用Object.assign克隆布局配置并尝试使用该布局，则cytoscape会迅速导致内存不足错误。我可以通过仅定义第二个布局来解决此问题，而第二个布局与第一个布局基本相同，而不是克隆，但是我想知道问题背后的原因，或者它是否可能是cytoscape的错误。

使用此示例代码，在加载页面后立即单击add and layout 2，它将挂起/内存不足。（让任务管理器方便地杀死选项卡或浏览器。）添加节点和运行克隆的布局的不同组合通常会挂起，但并非总是如此。

let cy
const layout1 = {
  name: 'euler',
  springLength: edge => 80,
  mass: node => 4,
  randomize: true,
  animate: false,
  gravity: -1.2,
  maxIterations: 1000,
  maxSimulationTime: 4000,
}

const layout2 = Object.assign({}, layout1, {
  fit: false,
  animate: true,
  randomize: false,
})

document.addEventListener('DOMContentLoaded', function() {
  cy = cytoscape({
    container: document.getElementById('cy'),
    layout: layout1,
    style: [
      {
        selector: 'node',
        style: {
          label: 'data(id)',
        },
      },
    ],
    elements: [
      { data: { id: 'a' } },
      { data: { id: 'b' } },
      { data: { id: 'a_b', source: 'a', target: 'b' } },
    ],
  })
})

function add() {
  cy.add([
    { data: { id: 'c' } },
    { data: { id: 'd' } },
    { data: { id: 'c_d', source: 'c', target: 'd' } },
  ])
  // cy.layout(layout2).run()
}

function doLayout1() {
  cy.layout(layout1).run()
}

function doLayout2() {
  cy.layout(layout2).run()
}

function addAndLayout2() {
  add()
  doLayout2()
}

<!DOCTYPE html>
    <html>
      <head>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/cytoscape/3.5.0/cytoscape.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/cytoscape-euler@1.2.1/cytoscape-euler.min.js"></script>
      </head>
    
      <style>
        body {
          height: 100%;
        }
        #cy {
          height: 100%;
          flex-grow: 1;
        }
        .main {
          height: 100vh;
          display: flex;
          flex: 1;
        }
      </style>
    
      <body>
        <button onclick="add()">add nodes</button>
        <button onclick="doLayout1()">layout 1</button>
        <button onclick="doLayout2()">layout 2</button>
        <button onclick="addAndLayout2()">add and layout 2</button>
        <div class="main">
          <div id="cy"></div>
        </div>
      </body>
    </html>

Answer 1

这与Ojbect.assign无关（即使您没有正确复制对象，它也不应挂起）。

原因是randomize选项。对于此特定图形，当将randomize选项设置为false时，布局永远不会结束。只需从第二个布局中删除randomize: false，或者在添加新节点之后并运行layout2之前运行random布局（或手动将节点随机化）– {{1} }将终止。

问题是：布局必须在某个点终止（在最坏的情况下，达到最大迭代次数）。但是这种特殊的布局永远不会终止。

有趣的是，对于其他一些布局算法（对于layout2）来说，这个简单的图形也是最坏的情况之一。我尝试了randomized: false。它也需要更长的时间，并在达到最大迭代次数时终止（将cose-bilkent选项设置为较小的数字将导致提前终止，从而导致质量下降），但结果确实很糟糕。

在这种特定情况下，为什么Cytoscape会进入“无限”循环？

1 个答案: