个人中心
gpt4 book ai didi

javascript - 为什么 Cytoscape 在这种特定情况下会进入 "infinite"循环？

转载 作者：行者123 更新时间：2023-12-02 23:48:16 24 4
gpt4 key购买 nike

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

使用此示例代码，加载页面后立即单击添加和布局 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>

最佳答案

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

原因是随机选项。对于这个特定的图表，当 randomize 选项设置为 false 时，布局永远不会结束。只需从第二个布局中删除 randomize: false ，或者在添加新节点之后、运行 layout2 之前，运行 random 布局(或者只是随机化手动节点)——layout2 将终止。

问题是:布局必须在某个点终止(最坏的情况是达到最大迭代次数时)。但这种特殊的布局永远不会终止。

有趣的是，这个简单的图表对于其他一些布局算法来说也是最糟糕的情况之一(对于randomized: false)。我尝试了cose-bilkent。它还需要更长的时间，并在达到最大迭代次数时终止(将 numIter 选项设置为较低的数字将导致提前终止，质量较差)——但结果非常糟糕。

关于javascript - 为什么 Cytoscape 在这种特定情况下会进入 "infinite"循环？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55749425/

24 4 0
文章推荐： javascript - 如何在上传pdf文件时在浏览器中显示pdf文件
文章推荐： android - Media.setLooping无法正常使用[Android]
文章推荐： loops - 一次遍历对象的集合n
文章推荐： javascript - 找不到模块 : Can't resolve: Material-UI
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com