cy.fit（）和cy.center（）无法正常工作

Question

我正在尝试使用cytoscape显示图表。设置节点和边。但是，cy.fit（）和cy.center（）事件不起作用。该图既不适合指定容器，也不适合居中。

我尝试使用cy.fit（cy。$（“＃id”））给出特定的元素，但还是没用。

//declaring elements

var elements = {
nodes: [
    { data: { id: 'a', name: ‘a’ } },
    { data: { id: 'b', name: ‘b’ } },
    { data: { id: 'c', name: ‘c’ } },
    { data: { id: 'd', name: ‘d’ } },
    { data: { id: 'e', name: ‘e’ } },
    { data: { id: 'f', name: ‘f’ } },
    { data: { id: 'j', name: ‘j’ } },
    { data: { id: 'k', name: ‘k’ } }
],
edges: [
    { data: { source: 'a', target: 'b' } },
    { data: { source: 'b', target: 'c' } },
    { data: { source: 'c', target: 'd' } },
    { data: { source: 'c', target: 'e' } },
    { data: { source: 'c', target: 'f' } },
    { data: { source: 'e', target: 'j' } },
    { data: { source: 'e', target: 'k' } }
 ]
};

var cy = cytoscape({
  container: document.getElementById('cy'),

  style: cytoscape.stylesheet()
    .selector('node')
    .css({
      'shape': 'rectangle',
      'content': 'data(name)',
      'width': 400,
      'height': 34,
      'text-valign': 'center',
      'background-color': '#6FB1FC',
      'color': '#fff',
    })
    .selector(':selected')
    .css({
      'border-width': 2,
      'border-color': '#333',
      'background-color': '#0073bb'
    })
    .selector('edge')
    .css({
      'curve-style': 'bezier',
      'opacity': 0.65,
      'width': 2,
      'target-arrow-shape': 'triangle',
      'line-color': '#000000',
      'source-arrow-color': '#000000',
      'target-arrow-color': '#000000'
    })
    .selector('.faded')
    .css({
      'opacity': 0.5,
      'text-opacity': 1
    }),

  elements: elements
});
cy.fit();
cy.center();
cy.autolock(true);

#cy {
  height: 500px;
  width: 900px;
  position: absolute;
  top: 0;
  border: 2px solid #6FB1FC;
  background: #fff;
}

<script type="text/javascript"
        src="https://cdnjs.cloudflare.com/ajax/libs/cytoscape/2.7.6/cytoscape.min.js"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/cpettitt/dagre/v0.7.4/dist/dagre.min.js"></script>
<script type="text/javascript"
        src="https://cdn.rawgit.com/cytoscape/cytoscape.js-dagre/1.1.2/cytoscape-dagre.js"></script>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>

<div id="cy"></div>