为什么以下简单的 cytoscape-dagre html 不起作用

问题描述 投票:0回答:0

我想通过创建一个简单的 html 来试用 cytoscape-dagre。这是我的 html 代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Visualization</title>
    <script src="https://unpkg.com/[email protected]/dist/cytoscape.min.js"></script>
    <script src="https://unpkg.com/[email protected]/cytoscape-dagre.js"></script>
    <style>
        #cy {
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
        }
    </style>
</head>

<body>
    <div id="cy"></div>
    <script>
        var cy = cytoscape({
          container: document.getElementById('cy'),
          elements: {
        nodes: [
          { data: { id: 'A' } },
          { data: { id: 'B' } }
        ],
        edges: [
          { data: { id: 'A-B', source: 'A', target: 'B' } }
        ]
      },
      layout: {
        name: 'dagre'
      }
    });
  </script>
</body>
</html>

但是网页上什么也没有显示。如果我删除布局部分,它将正确呈现节点。我想念什么才能使 dagre 布局正常工作?

cytoscape.js dagre
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.