大小适中的图形呈现出奇怪的跳跃

我发现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>

力导向调整阶段:

大小适中的图形呈现出奇怪的跳跃

最终版式:

大小适中的图形呈现出奇怪的跳跃

有什么建议我正在做导致这种情况的事情?

caoiq 回答:大小适中的图形呈现出奇怪的跳跃

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

本文链接:https://www.f2er.com/3017893.html

大家都在问