Dagre布局适合：true不适用于cytoscape.js

Question

我希望使用Dagre布局可视化相邻div块300x200中的两个图形。

这是html代码：

<div class="row">
      <div class="col-md-5" id="graph1">
        <p style="text-align: center">Graph1</p>
      </div>
      <div class="col-md-5" id="graph2">
        <p style="text-align: center">Graph2</p>
      </div>
</div>

我按照此处的指定逐个创建两个cytoscape图：

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

    boxSelectionEnabled: false,
    autounselectify: true,
    userPanningEnabled: false,

    layout: {
      name: 'dagre',
      fit: true
    },

    style: [
      {
        selector: 'node',
        style: {
          'content': 'data(id)',
          'text-opacity': 0.5,
          'text-valign': 'center',
          'text-halign': 'right',
          'background-color': '#11479e'
        }
      },

      {
        selector: 'edge',
        style: {
          'width': 2,
          'target-arrow-shape': 'triangle',
          'line-color': '#9dbaea',
          'target-arrow-color': '#9dbaea'
        }
      },

      {
        selector: '#n1',
        style: {
          'background-color':'#ffffff',
          'shape':'rectangle',
          'background-opacity': 1.0
        }
      },

      {
        selector: '#n0',
        style: {
          'background-color': '#ffffff',
          'shape': 'rectangle',
          'background-opacity': 1.0
        }
      }
    ],

    elements: {
      nodes: [
        { data: { id: 'n0' } },
        { data: { id: 'n1' } },
        { data: { id: 'n2' } },
        { data: { id: 'n3' } },
        { data: { id: 'n4' } }
      ],
      edges: [
        { data: { source: 'n0', target: 'n1' } },
        { data: { source: 'n1', target: 'n2' } },
        { data: { source: 'n1', target: 'n3' } },
        { data: { source: 'n0', target: 'n4' } }
      ]
    }
  });

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

    boxSelectionEnabled: false,

    layout: {
      name: 'dagre',
      fit: true
    },

    style: [
      {
        selector: 'node',
        style: {
          'content': 'data(id)',
          'text-opacity': 0.5,
          'text-valign': 'center',
          'text-halign': 'right',
          'background-color': '#11479e'
        }
      },

      {
        selector: 'edge',
        style: {
          'width': 2,
          'target-arrow-shape': 'triangle',
          'line-color': '#9dbaea',
          'target-arrow-color': '#9dbaea'
        }
      },
      {
        selector: '#n1',
        style: {
          'background-color':'#ffffff',
          'shape':'rectangle',
          'background-opacity': 1.0
        }
      }
    ],

    elements: {
      nodes: [
        { data: { id: 'n1' } },
        { data: { id: 'n2' } },
        { data: { id: 'n3' } },
        { data: { id: 'n4' } },
        { data: { id: 'n5' } },
        { data: { id: 'n6' } }
      ],
      edges: [
        { data: { source: 'n1', target: 'n2' } },
        { data: { source: 'n1', target: 'n3' } },
        { data: { source: 'n1', target: 'n4' } },
        { data: { source: 'n1', target: 'n5' } },
        { data: { source: 'n1', target: 'n6' } }
      ]
    }
  });

即使在布局选项中指定了fit:true，也会部分呈现正确的图表（＆＃39; graph2＆＃39;）。 任何想法如何使它工作？