为何简单的cytoscape-dagre HTML页面无法正常显示？

你遗漏了注册cytoscape-dagre布局扩展的关键步骤。虽然已经引入了dagre的脚本，但cytoscape不会自动加载第三方布局扩展，必须手动注册后才能识别并使用dagre布局名称。

修改步骤 #

在创建cytoscape实例的代码前，添加一行注册扩展的代码：

cytoscape.use( cytoscapeDagre );

修改后的完整代码 #

<!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/cytoscape@3.23.0/dist/cytoscape.min.js"></script>
    <script src="https://unpkg.com/cytoscape-dagre@2.5.0/cytoscape-dagre.js"></script>
    <style>
        #cy {
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
        }
    </style>
</head>

<body>
    <div id="cy"></div>
    <script>
        // 注册dagre布局扩展
        cytoscape.use( cytoscapeDagre );
        
        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>

说明 #

cytoscape.use()方法是cytoscape加载第三方扩展的标准方式，执行这行代码后，dagre布局会被添加到cytoscape的可用布局集合中，此时配置layout: { name: 'dagre' }就能正常生效，节点和边会按照dagre的层级布局规则渲染出来。

内容的提问来源于stack exchange，提问作者David M