Django项目中Cytoscape.js无法加载图形问题求助

代码中的核心错误 #

1. 对象属性语法错误：初始化Cytoscape实例时，container = document.getElementById('cy')用了等号，对象字面量里必须用冒号:定义属性。
2. 重复节点ID：nodes数组里存在两个id: 'a3'的节点，Cytoscape要求所有节点ID唯一，重复ID会导致渲染异常。
3. 标签字段不匹配：节点样式里设置'label': 'data(label)'，但节点数据里只有name字段，导致节点无法显示标签。

修复后的完整代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Graph View</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/cytoscape/3.8.4/cytoscape.min.js" integrity="sha512-gn5PcEn1Y2LfoL8jnUhJtarbIPjFmPzDMljQbnYRxE8IP0y5opHE1nH/83YOuiWexnwftmGlx6i2aeJUdHO49A==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <style>
     #cy {
       width: 300px;
       height: 250px;
       display: block;
       background-color: #fff;
       border: 1px solid #ccc; /* 加边框方便确认容器位置 */
    }
    </style>
</head>
<body>
    {{data}}
    <div id="cy"></div>
    <div id="test"></div>
    <h2>Hello</h2>
<script>
        var cy = cytoscape({
            container: document.getElementById('cy'), // 修正为冒号
            elements:
            {
    nodes: [
      { data: { id: 'a', name: 'Sheraton Cherry' } },
      { data:  { id: 'a1', name: 'Rosacea'}},
      { data: { id: 'a2', name: 'Dentate' } },
      { data: { id: 'a3', name: 'Pinnate' } },
      { data: { id: 'b', name: 'Pineapple Guava' } },
      { data:  { id: 'b1', name: 'Myrtaceae'}},
      { data: { id: 'b2', name: 'Entire' } }
      // 移除重复的a3节点
    ],
    edges: [
      { data: { source: 'a1', target: 'a' }},
      { data: { source: 'a2', target: 'a' }},
      { data: { source: 'a3', target: 'a' }},
      { data: { source: 'b1', target: 'b'}},
      { data: { source: 'b2', target: 'b'}},
      { data: { source: 'a3', target: 'b'}}
    ]
  },
            style: [
                {
                        selector: 'node',
                        style: {
                            'label': 'data(name)', // 修正为匹配节点的name字段
                            'width': '60px',
                            'height': '60px',
                            'color': 'blue',
                            'background-color': '#eee', // 增加背景色让节点更显眼
                            'background-fit': 'contain',
                            'background-clip': 'none'
          }  }, {
                        selector: 'edge',
                        style: {
                           'text-background-color': 'yellow',
                            'text-background-opacity': 0.4,
                            'width': '6px',
                            'target-arrow-shape': 'triangle',
                            'control-point-step-size': '140px',
                            'line-color': '#ccc' // 给边添加颜色
                        }
                }
            ],
                layout: {
                    name: 'circle'
                }
        });
    </script>
</body>
</html>

额外调试建议 #

• 开发时打开浏览器控制台（快捷键F12），查看JavaScript报错信息，这是快速定位问题的关键。
• 如果后续要加载Django传递的{{data}}，确保数据是合法JSON格式，并且在脚本中正确解析，比如使用JSON.parse('{{data|escapejs}}')避免转义问题。

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