咨询Neovis.js兼容Vis.js交互功能及Vis.js直连Neo4J的方案

阿华AIGC实验室

2026-5-15

解答你的Neovis.js & Vis.js + Neo4j问题

1. Neovis.js是否包含Vis.js原有的节点增删、缩放等功能？

首先明确：Neovis.js确实基于Vis.js构建，但它的核心定位是只读展示Neo4j查询结果，所以默认禁用了不少编辑类交互，但缩放功能其实可以通过配置启用，节点增删则需要额外扩展逻辑。

缩放功能：你可以在Neovis初始化配置里开启交互支持，比如在visConfig中添加相关设置：

const config = {
  containerId: "viz",
  neo4j: { /* 你的Neo4j连接配置 */ },
  visConfig: {
    interaction: {
      zoomView: true,
      dragView: true,
      zoomSpeed: 0.5
    },
    configure: {
      enabled: true // 开启配置面板，方便调试交互参数
    }
  },
  // 其他查询、样式配置...
};

配置后应该就能恢复Vis.js原本的缩放、拖拽视图功能了。

节点增删功能：Neovis.js本身没有内置把前端编辑的节点/边同步回Neo4j的能力——它设计出来就是用来展示查询结果的，不是双向编辑工具。如果需要增删节点并保存到数据库，得自己写逻辑连接前端交互和Neo4j操作。

2. 适合你需求的Vis.js直连Neo4j方案

你的需求是「展示Neo4j查询结果 + 网页端增删节点/边并保存」，最灵活且可控的方案是Vis.js + Neo4j官方JavaScript驱动，完全自定义交互和数据同步逻辑，步骤大概是这样：

步骤1：引入依赖

同时加载Vis.js库和Neo4j JavaScript Driver：

<!-- Vis.js -->
<script src="https://unpkg.com/vis-network/standalone/umd/vis-network.min.js"></script>
<link href="https://unpkg.com/vis-network/styles/vis-network.min.css" rel="stylesheet" />

<!-- Neo4j Driver -->
<script src="https://unpkg.com/neo4j-driver"></script>

步骤2：连接Neo4j并加载初始数据

用Neo4j Driver执行Cypher查询，把结果转换成Vis.js需要的节点/边格式：

// 连接Neo4j数据库
const driver = neo4j.driver(
  "bolt://localhost:7687",
  neo4j.auth.basic("你的用户名", "你的密码")
);

// 从Neo4j加载初始图数据
async function loadGraphData() {
  const session = driver.session();
  try {
    const result = await session.run("MATCH (n)-[r]->(m) RETURN n, r, m");
    // 转换为Vis.js支持的数据集格式
    const nodes = new vis.DataSet();
    const edges = new vis.DataSet();
    
    result.records.forEach(record => {
      const node1 = record.get("n");
      nodes.add({ id: node1.identity.toString(), label: node1.properties.name });
      
      const node2 = record.get("m");
      nodes.add({ id: node2.identity.toString(), label: node2.properties.name });
      
      const rel = record.get("r");
      edges.add({ 
        id: rel.identity.toString(), 
        from: node1.identity.toString(), 
        to: node2.identity.toString(), 
        label: rel.type 
      });
    });
    
    return { nodes, edges };
  } finally {
    await session.close();
  }
}

步骤3：初始化Vis.js网络并添加交互逻辑

创建Vis网络实例，然后监听前端事件（比如双击、按钮点击），实现增删节点/边并同步到Neo4j：

async function initGraph() {
  const { nodes, edges } = await loadGraphData();
  const container = document.getElementById("viz");
  const data = { nodes, edges };
  const options = {
    interaction: {
      hover: true,
      selectable: true
    }
  };
  
  const network = new vis.Network(container, data, options);
  
  // 示例：双击空白处添加新节点
  network.on("doubleClick", async (params) => {
    if (params.nodes.length === 0) { // 点击空白区域
      const newNodeLabel = prompt("输入新节点名称：");
      if (!newNodeLabel) return;
      
      // 先在Neo4j中创建节点
      const session = driver.session();
      try {
        const result = await session.run(
          "CREATE (n:Node {name: $name}) RETURN n",
          { name: newNodeLabel }
        );
        const newNode = result.records[0].get("n");
        // 再把新节点添加到Vis.js的节点集合中
        nodes.add({ id: newNode.identity.toString(), label: newNodeLabel });
      } finally {
        await session.close();
      }
    }
  });
  
  // 示例：点击按钮删除选中的节点/边
  document.getElementById("delete-btn").addEventListener("click", async () => {
    const selectedNodes = network.getSelectedNodes();
    const selectedEdges = network.getSelectedEdges();
    
    if (selectedNodes.length > 0) {
      const session = driver.session();
      try {
        // 删除Neo4j中的节点（连带关联的关系）
        await session.run(
          "MATCH (n) WHERE ID(n) IN $ids DETACH DELETE n",
          { ids: selectedNodes.map(id => parseInt(id)) }
        );
        // 从Vis.js中移除节点
        nodes.remove(selectedNodes);
      } finally {
        await session.close();
      }
    }
    
    if (selectedEdges.length > 0) {
      const session = driver.session();
      try {
        await session.run(
          "MATCH ()-[r]->() WHERE ID(r) IN $ids DELETE r",
          { ids: selectedEdges.map(id => parseInt(id)) }
        );
        edges.remove(selectedEdges);
      } finally {
        await session.close();
      }
    }
  });
}

// 启动可视化
initGraph();