使用Cytoscape JS创建可视化图表时页面空白的问题求助

我尝试用 Cytoscape JS 创建并可视化图，现有 index.html 和 input.js 两个文件，代码如下：

原 index.html 代码 #

<head>
    <title>Tutorial 1: Getting Started</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/cytoscape/2.7.10/cytoscape.js"></script>
</head>
<style>
    #cy {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0px;
        left: 0px;
    }
</style>
<body>
    <div id="cy"></div>
    <script>
      $.getJSON("input.js", function (data) {
      var cy = cytoscape({
        elements: data,
        container: document.getElementById('cy'),
        style: [
    {
        selector: 'node',
        style: {
            shape: 'hexagon',
            'background-color': 'red',
            label: 'data(id)'
        }
    }],
    layout: {
    name: 'grid'
},
});
      });
    </script>
</body>

原 input.js 代码 #

[
  // nodes
  { data: { id: 'a' } },
  { data: { id: 'b' } },
  { data: { id: 'c' } },
  { data: { id: 'd' } },
  { data: { id: 'e' } },
  { data: { id: 'f' } },
  // edges
  {
    data: {
      id: 'ab',
      source: 'a',
      target: 'b'
    }
  },
  {
    data: {
      id: 'cd',
      source: 'c',
      target: 'd'
    }
  },
  {
    data: {
      id: 'ef',
      source: 'e',
      target: 'f'
    }
  },
  {
    data: {
      id: 'ac',
      source: 'a',
      target: 'd'
    }
  },
  {
    data: {
      id: 'be',
      source: 'b',
      target: 'e'
    }
  }
]

打开 index.html 时页面仅显示空白，已根据建议修改代码，但仍无法查看图表，请求协助解决。

问题分析与解决方案 #

核心问题点 #

1. 缺少 jQuery 依赖：代码中使用了 $.getJSON，但未引入 jQuery 库，导致请求无法执行。
2. Cytoscape 版本过旧：使用的 2.7.10 版本是多年前的旧版本，存在兼容性问题，建议升级到最新稳定版。
3. 容器高度未正确继承：仅设置了 #cy 的高度为 100%，但未设置 html 和 body 的高度，导致容器实际高度为 0。
4. 文件类型与请求匹配问题：input.js 是 JSON 格式内容，但以 .js 后缀命名，部分环境下可能无法正确解析为 JSON。

修正后的代码 #

1. 更新 index.html

<!DOCTYPE html>
<html>
<head>
    <title>Tutorial 1: Getting Started</title>
    <!-- 引入最新稳定版 jQuery -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <!-- 引入最新稳定版 Cytoscape JS -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/cytoscape/3.29.2/cytoscape.min.js"></script>
    <style>
        /* 确保 html 和 body 占满整个视口 */
        html, body {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
            overflow: hidden;
        }
        #cy {
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
        }
    </style>
</head>
<body>
    <div id="cy"></div>
    <script>
        // 建议将 input.js 重命名为 input.json，确保请求正确解析
        $.getJSON("input.json", function(data) {
            var cy = cytoscape({
                container: document.getElementById('cy'),
                elements: data,
                style: [
                    {
                        selector: 'node',
                        style: {
                            shape: 'hexagon',
                            'background-color': 'red',
                            label: 'data(id)'
                        }
                    },
                    // 新增边的样式，避免边不可见
                    {
                        selector: 'edge',
                        style: {
                            'line-color': '#ccc',
                            'width': 2
                        }
                    }
                ],
                layout: {
                    name: 'grid'
                }
            });
        }).fail(function() {
            // 添加错误捕获，方便排查问题
            console.error("无法加载或解析 input.json 文件");
        });
    </script>
</body>
</html>

2. 调整 input.js

将文件重命名为 input.json，内容保持不变：

[
  // nodes
  { "data": { "id": "a" } },
  { "data": { "id": "b" } },
  { "data": { "id": "c" } },
  { "data": { "id": "d" } },
  { "data": { "id": "e" } },
  { "data": { "id": "f" } },
  // edges
  {
    "data": {
      "id": "ab",
      "source": "a",
      "target": "b"
    }
  },
  {
    "data": {
      "id": "cd",
      "source": "c",
      "target": "d"
    }
  },
  {
    "data": {
      "id": "ef",
      "source": "e",
      "target": "f"
    }
  },
  {
    "data": {
      "id": "ac",
      "source": "a",
      "target": "d"
    }
  },
  {
    "data": {
      "id": "be",
      "source": "b",
      "target": "e"
    }
  }
]

额外注意事项 #

• 如果是本地直接打开 index.html，部分浏览器可能因跨域限制无法加载本地 JSON 文件，建议使用本地服务器（如 python -m http.server）运行。
• 打开浏览器控制台（F12）查看是否有报错信息，可快速定位问题。

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