前端知识图谱展示NeoVis实现

介绍

由于近期项目需要前端界面去展示一个知识图谱,使用NeoVis去连接neo4j的数据库.NeoVis.js 是一个专为 Neo4j 图数据库设计的可视化库,该框架允许开发者通过指定标签、属性和自定义Cypher查询来控制数据展示，支持实时数据连接，允许自定义节点和边的显示细节，如图片URL、边的宽度、节点大小等，提供丰富的配置选项以满足不同的视觉需求。

一、安装Neo4j

npm install --save neovis.js

二、建立到本地Neo4j数据库的连接，指定显示的节点属性，并通过一个基础Cypher查询获取数据。

import NeoVis from "neovis.js/dist/neovis.js";

let viz1 = ref(null);

let nodeInfo = ref({});

const draw = () => {
  let viz = null;
  // config 配置项
  var config = {
    containerId: "viz1", //dom元素id
    // neo4j服务器地址，用户名 和 密码
   neo4j: {
      serverUrl: "neo4j://xxx", //连接的地址是端口号为7687的不是7474
      serverUser: "neo4j",
      serverPassword: "password",
      // driverConfig: {
      //   encrypted: "ENCRYPTION_ON",
      //   trust: "TRUST_SYSTEM_CA_SIGNED_CERTIFICATES",
      // },
    },

    // labels是节点样式的配置
    // 没有在这个地方配置的节点将会是默认样式
    labels: {
      水库: {
        label: "name", // 节点显示的文字对应内容key
        community: "community", //节点颜色 String：要用作社区（color）的属性名。默认为“按标签着
        // 色”。
        size: "pagerank", // 用作节点大小的属性名。默认为1。
        // 节点字体大小设置
        font: { size: 15, color: "#606266" },
      },
      雨量站: {
        label: "name", // 节点显示的文字对应内容key
        community: "community", //节点颜色 String：要用作社区（color）的属性名。默认为“按标签着色”。
        size: "pagerank", // 用作节点大小的属性名。默认为1。
        // 节点字体大小设置
        font: { size: 15, color: "#C873D3FF" },
   
      },
    },
    // relationships是关系线段样式的配置
    // 没有在这个地方配置的线段将会是默认样式
    relationships: {
      流向: {
        nonFlat: true,
        label: "type",
        thickness: "weight", //String：线段粗细，用作边缘厚度的属性名。默认为1。
        caption: true, //Boolean：如果设置为true，则关系类型将显示为边缘标题。或String：用作边缘标题的属性名。
        font: { size: 12, color: "#606266" }, // 关系节点文字大小颜色
      },
      位于: {
        nonFlat: true,
        label: "type",
        thickness: "weight", //String：线段粗细，用作边缘厚度的属性名。默认为1。
        caption: true, //Boolean：如果设置为true，则关系类型将显示为边缘标题。或String：用作边缘标题的属性名。
        font: { size: 12, color: "#606266" }, // 关系节点文字大小颜色
      },
    },
    visConfig: {
      edges: {
        arrows: {
          to: {
            enabled: true,
            type: "arrow",
          },
        },
        // label: "位于",
      },
    },

    // 关系线段是否显示箭头
    arrows: true,

    hierarchical: false, // 节点显示方式 是否启用分层布局后
    // 分层结构或者默认 "hubsize"（默认）和"directed".
    hierarchical_sort_method: "directed",

    // 配置数据库查询语句, 替换成自己的查询语句才可以显示
    initialCypher: "MATCH p=()-->() RETURN p",
  };

  viz = new NeoVis(config);
  viz.render();

  viz.registerOnEvent("clickNode", nodeClick);
  viz.registerOnEvent("clickEdge", edgeClick);

  console.log(11, viz);
};

const nodeClick = (node) => {
  console.log(node);
  nodeInfo.value = node.node;
};

const edgeClick = (edge) => {
  console.log(edge);
  // nodeInfo.value = edge.edge;
};

onMounted(() => {
  // var query = "MATCH p=()-->() RETURN p";
  // executeCypher(query);
  draw();
});

三、效果