使用neovis.js可视化Neo4j数据时出错，请求技术帮助

针对你用neovis.js实现Neo4j图可视化时遇到的错误，结合你的代码，从以下几个核心方向排查修复：

1. 补充缺失的核心依赖 #

你引入的neovis-without-dependencies.js本身不包含可视化渲染库和Neo4j驱动，必须手动添加这两个依赖到<head>中：

<script src="https://unpkg.com/vis-network@9.1.0/dist/vis-network.min.js"></script>
<script src="https://unpkg.com/neo4j-driver@4.4.11/dist/neo4j-driver.min.js"></script>

添加后完整的<head>部分：

<head>
    <title>DataViz</title>
    <style type="text/css">
        #viz {
            width: 900px;
            height: 700px;
        }
    </style>
    <script src="https://unpkg.com/vis-network@9.1.0/dist/vis-network.min.js"></script>
    <script src="https://unpkg.com/neo4j-driver@4.4.11/dist/neo4j-driver.min.js"></script>
    <script src="https://unpkg.com/neovis.js@2.0.2/dist/neovis-without-dependencies.js"></script>
</head>

2. 修复Bolt连接问题 #

• 显式指定端口：Neo4j默认Bolt端口为7687，建议把连接地址写全：bolt://localhost:7687
• 解决跨域限制：直接用浏览器打开本地HTML文件（file://协议）会触发跨域安全限制，无法连接Neo4j。解决方式二选一：
  • 将HTML文件部署到本地Web服务器（如Apache、Nginx），用http://localhost访问
  • 在Neo4j配置文件neo4j.conf中添加跨域支持（仅测试环境使用），重启Neo4j生效：

    dbms.security.allow_outgoing_connections=true
    dbms.security.http_auth_allowlist=*
    

3. 完善配置与验证查询 #

• 补充节点/关系样式：空的labels和relationships配置可能导致渲染异常，建议添加基础样式：

  labels: {
      Idea: {
          label: "Idea",
          color: "#FF9800"
      },
      Keyphrase: {
          label: "Keyphrase",
          color: "#2196F3"
      }
  },
  relationships: {
      contains: {
          label: "contains"
      }
  }
  

• 验证Cypher查询：先在Neo4j浏览器中执行MATCH p= (:Idea)-[:contains]->(:Keyphrase) RETURN p，确认是否有返回结果。如果无数据，可视化自然无法显示内容。

修正后的完整代码 #

<html>
<head>
    <title>DataViz</title>
    <style type="text/css">
        #viz {
            width: 900px;
            height: 700px;
        }
    </style>
    <script src="https://unpkg.com/vis-network@9.1.0/dist/vis-network.min.js"></script>
    <script src="https://unpkg.com/neo4j-driver@4.4.11/dist/neo4j-driver.min.js"></script>
    <script src="https://unpkg.com/neovis.js@2.0.2/dist/neovis-without-dependencies.js"></script>
</head>

<script type="text/javascript">
    var viz;
    function draw() {
        var config = {
            container_id: "viz",
            server_url: "bolt://localhost:7687",
            server_user: "neo4j",
            server_password: "你的实际密码",
            labels: {
                Idea: {
                    label: "Idea",
                    color: "#FF9800"
                },
                Keyphrase: {
                    label: "Keyphrase",
                    color: "#2196F3"
                }
            },
            relationships: {
                contains: {
                    label: "contains"
                }
            },
            initial_cypher: "MATCH p= (:Idea)-[:contains]->(:Keyphrase) RETURN p"
        }

        viz = new NeoVis.default(config);
        viz.render();
    }
</script>

<body onload="draw()">
    <div id="viz"></div>
</body>
</html>

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