中等大小的图形以奇怪的跳跃呈现

Question

我发现 cytoscape.js 以奇怪的方式呈现我的图表 - 首先它经过几秒钟的力导向调整，然后所有节点突然捕捉到看起来可能是单独的布局。这是一个很大的跳跃，而不是一个平稳的过程。这说明：

index.html

<!doctype html>
<html>
<head>
    <title>Cytoscape issue</title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <link type="text/css" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" />
    <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.js'></script>
    <script src='https://cdnjs.cloudflare.com/ajax/libs/cytoscape/3.9.4/cytoscape.umd.js'></script>
</head>

<style>
    #cy {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0px;
      left: 0px;
    }
    #advance {
      width: 20%;
      height: 10%;
      position: absolute;
      top: 5%;
      right: 5%;
    }
    #loading {
      position: absolute;
      display: block;
      left: 0;
      top: 50%;
      width: 100%;
      text-align: center;
      margin-top: -0.5em;
      font-size: 2em;
      color: #000;
    }
    #loading.loaded {
      display: none;
    }
</style>

<body>
    <div id="cy"></div>
    <div id="loading"><span class="fa fa-refresh fa-spin"></span></div>

    <script>
    var d;

    document.addEventListener("DOMContentLoaded", function() {

      $.getJSON("https://gist.githubusercontent.com/geotheory/3b8cf288c5f7b84fa8635e3dc9171ab8/raw/ff4e93e8cd727930624da3a1e910ebd6844caeff/graph-data.json", function(json){
        d = json;

        var cy = cytoscape({
          container: document.getElementById('cy'),
          elements: json,
          style: [{
            selector: 'node',
            style: {
              // 'label': 'none',
              'width': '10px',
              'height': '10px',
              'color': 'blue',
              'font-size': '8px',
              'text-halign': 'right',
              'text-valign': 'center',
              'background-opacity': 1,
              'background-image': 'none',
              'background-fit': 'contain',
              'background-clip': 'none'
            }
          }, {
            selector: 'edge',
            style: {
              'curve-style': 'bezier',
              'opacity': 1,
              'width': '1px',
              'target-arrow-shape': 'none',
              'arrow-scale': 0,
              'control-point-step-size': '1px'
            }
          }],
          layout: {
                            name: 'cose',
                fit: true,
                avoidOverlap: true,
                avoidOverlapPadding: 10
                        },
          hideEdgesOnViewport: true
        });

        cy.center();
        var loading = document.getElementById('loading');
        loading.classList.add('loaded');

      });
      console.log('done');
    });

    </script>
</body>
</html>

力导向调整阶段：

最终布局：

对我正在做的事情有什么建议吗？

Answer 1

我认为这不是你的错。它与 cose 布局更相关，而 animate 选项为真。如果中间迭代不是那么重要，您可以使用 animate: 'end' 或 animate: false 选项。

中等大小的图形以奇怪的跳跃呈现

Modest sized graph renders with a strange jump

cytoscape.js