使用Neovis.js+vue2可视化demo

使用 Neovis.js 可视化 demo

参考：

https://gitcode.net/mirrors/neo4j-contrib/neovis.js?utm_source=csdn_github_accelerator

1，Prepare Neo4j

LOAD CSV WITH HEADERS FROM 'https://raw.githubusercontent.com/mathbeveridge/asoiaf/master/data/asoiaf-all-edges.csv'
AS row
MERGE (src:Character {name: row.Source})
MERGE (tgt:Character {name: row.Target})
MERGE (src)-[r:INTERACTS]->(tgt)
  ON CREATE SET r.weight = toInteger(row.weight)

LOAD CSV WITH HEADERS FROM 'https://raw.githubusercontent.com/johnymontana/neovis.js/master/examples/data/got-centralities.csv'
AS row
MATCH (c:Character {name: row.name})
SET c.community = toInteger(row.community),
c.pagerank = toFloat(row.pagerank)

Install

Neovis.js can be installed via npm:

npm install --save neovis.js

vue2界面

<template>
  <div>
    <div id="viz"></div>
    <!-- <div style="height: 100%" ref="Screen">
      <div class="left" id="viz1" ref="viz1"></div>
    </div> -->
  </div>
</template>

<script>
import NeoVis from "neovis.js";
var neo4j = require("neo4j-driver");

export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: "Neo4j",
  data() {
    return {
      neoViz: {},
    };
  },
  mounted() {
    var query = "MATCH (n:Person) RETURN n LIMIT 2";
    this.executeCypher(query);
    this.draw();
  },
  methods: {
    executeCypher(query) {
      this.echartsNode = []; //节点数组
      this.nodesRelation = []; //关系线数组
      this.category = []; //echarts图例数据数
      // 创建实例
      this.driver = neo4j.driver("bolt://localhost:7687");
      console.log(
        "🚀 ~ file: AuthorArticleSearch.vue ~ line 46 ~ mounted ~  this.drive",
        this.driver
      );

      let me = this;
      me.records = [];
      this.clearAll = true;
      let session = this.driver.session();
      if (query == "") return;
      session
        .run(query, {})
        .then((result) => {
          me.clearAll = false;
          me.records = result.records;
          console.log("neo4j 查询结果", result);

          session.close();
          me.closeLoading(false);
        })
        .catch(function (error) {
          console.log("Cypher 执行失败！", error);
          me.driver.close();
        });
    },
    closeLoading(status) {
      console.log("closeLoading", status);
    },
    draw() {
      const config = {
        containerId: "viz",
        neo4j: {
          serverUrl: "bolt://localhost:7687",
          // serverUser: "neo4j",
          // serverPassword: "sorts-swims-burglaries",
        },
        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 * LIMIT 25",
      };

      this.neoViz = new NeoVis(config);
      this.neoViz.render();
    },
  },
};
</script>

<style scoped>
#viz {
  width: 900px;
  height: 700px;
  border: 1px solid lightgray;
  font: 22pt arial;
}
</style>