【亲测免费】 NeoVis.js 安装和配置指南

2026-01-21 05:11:02作者：袁立春Spencer

1. 项目基础介绍

NeoVis.js 是一个用于在浏览器中进行图数据可视化的开源项目。它结合了 Neo4j 数据库和 vis.js 可视化库，使得用户能够轻松地从 Neo4j 数据库中获取数据并在浏览器中进行图数据的展示。该项目主要使用 TypeScript 和 JavaScript 进行开发。

2. 项目使用的关键技术和框架

Neo4j: 一个高性能的图数据库，用于存储和管理图数据。
vis.js: 一个用于在浏览器中进行数据可视化的 JavaScript 库。
TypeScript: 项目的主要编程语言，提供了强类型检查和现代 JavaScript 特性。
webpack: 用于打包和构建项目的工具。

3. 项目安装和配置的准备工作和详细的安装步骤

3.1 准备工作

在开始安装和配置之前，请确保你已经安装了以下软件：

Node.js: 用于运行 JavaScript 环境。你可以从 Node.js 官网下载并安装。
npm: Node.js 的包管理工具，通常随 Node.js 一起安装。
Neo4j 数据库: 用于存储图数据。你可以从 Neo4j 官网下载并安装。

3.2 安装步骤

3.2.1 安装 NeoVis.js

你可以通过 npm 或 CDN 来安装 NeoVis.js。

通过 npm 安装：

npm install --save neovis.js

通过 CDN 安装：

在 HTML 文件中引入以下脚本：

<script src="https://unpkg.com/neovis.js@2.0.2"></script>

3.2.2 配置 NeoVis.js

在你的项目中创建一个 HTML 文件，并配置 NeoVis.js 以连接到你的 Neo4j 数据库。

示例 HTML 文件：

<!DOCTYPE html>
<html>
<head>
    <title>NeoVis.js 示例</title>
    <style type="text/css">
        html, body {
            font: 16pt arial;
        }
        #viz {
            width: 900px;
            height: 700px;
            border: 1px solid lightgray;
            font: 22pt arial;
        }
    </style>
</head>
<body onload="draw()">
    <div id="viz"></div>
    <script src="https://unpkg.com/neovis.js@2.0.2"></script>
    <script type="text/javascript">
        let neoViz;
        function draw() {
            const config = {
                containerId: "viz",
                neo4j: {
                    serverUrl: "bolt://localhost:7687",
                    serverUser: "neo4j",
                    serverPassword: "your_password"
                },
                labels: {
                    Character: {
                        label: "name",
                        value: "pagerank",
                        group: "community",
                        [NeoVis.NEOVIS_ADVANCED_CONFIG]: {
                            function: {
                                title: (node) => viz.nodeToHtml(node, ["name", "pagerank"])
                            }
                        }
                    }
                },
                relationships: {
                    INTERACTS: {
                        value: "weight"
                    }
                },
                initialCypher: "MATCH (n)-[r:INTERACTS]->(m) RETURN *"
            };
            neoViz = new NeoVis.default(config);
            neoViz.render();
        }
    </script>
</body>
</html>