Neovis.js 开源项目安装与使用指南

2026-01-16 10:24:37作者：伍霜盼Ellen

目录结构及介绍

在Neovis.js项目中, 典型的目录结构可能是这样的：

/dist: 这个目录包含了打包后的JavaScript文件，用于浏览器环境中加载使用。
- neovis.js: 主要的 Neovis.js 文件。
- neovis-without-dependencies.js: 一个没有依赖于 neo4j-driver 的 Neovis.js 版本。
/docs: 文档目录，通常包括一些辅助说明文档或者API参考等。
/examples: 包含了一些示例代码或HTML页面以展示如何使用 Neovis.js 来进行图形可视化。
/src: 源代码目录，在这里你可以找到主要的代码逻辑实现。
- neovis.ts: Neovis.js 的核心类定义和其他主要功能实现。
/tests: 单元测试代码目录，用来验证代码的正确性。
package.json, npm.sh, webpack.config.js: 分别是NPM配置文件、NPM脚本文件以及Webpack配置文件，它们一起构成了项目的构建系统。

启动文件介绍

`main.js`

这是一个假设的入口点，可能并不一定存在，但在许多Web应用中，main.js通常是负责引入和初始化应用程序的主要组件的地方。

例如，对于Neovis.js来说，你的网页中的<script>标签可能会加载neovis.js文件并执行相关的初始化代码来显示图形数据。这可能看起来像下面这样：

<script type="text/javascript">
// 实例化Neovis对象
var viz = new NeoVis({
  containerId: "container", // 画布容器ID
  serverUrl: "http://localhost:7474/db/data/", // Neo4j服务器URL
  initialCypherQuery: "MATCH (n) RETURN n LIMIT 10", // 初始查询语句
});
// 渲染图形
viz.render();
</script>

这段代码创建了一个新的NeoVis实例，指定了Neo4j服务器的位置，并且运行了初始的Cypher查询以获取数据。然后调用了render()方法将结果渲染到指定的HTML元素上。

配置文件介绍

尽管Neovis.js本身不提供单独的配置文件，但是它通过构造函数接受一个配置对象作为参数来进行配置。这个对象可以包含多个属性来自定义行为和外观，比如连接Neo4j服务器的信息、默认查询、节点样式等等。

例如：

const config = {
  containerId: "#myChart",
  serverUrl: "http://localhost:7474/",
  auth: { user: "neo4j", pass: "password" },
  initialCypherQuery: "MATCH (p:Person)-[:KNOWS]->(knows:Person) RETURN p, knows LIMIT 10",
};