CODEWITHSUNDEEP
cytoscape.js
geotheory
geotheory

Reputation: 23630

Modest sized graph renders with a strange jump

I find cytoscape.js renders my graph strangely - first it runs through several seconds of force-directed adjustment, and then the nodes all suddenly snap to what looks like maybe a separate layout. It is a big jump and not a smooth process. This illustrates:

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>

The force-directed adjustment stage:

enter image description here

Final layout:

enter image description here

Any suggestions what I'm doing to cause this?

Upvotes: 1

Views: 122

Answers (1)

Hasan Balcı
Hasan Balcı

Reputation: 1088

I think it's not your fault. It is more related with the cose layout while animate option is true. If in-between iterations are not so important, you can use animate: 'end' or animate: false options.

Upvotes: 3

Related Questions