随着互联网不断的发展，传统的关系型数据库如oracle，mysql已经难以支撑现下大数据量，高并发的场景了。于是，NoSQL横空出世，有像cassandra这样的column-based，像MongoDB这样document-based。今天在这里猎奇的是一个graph-based的数据库，Neo4j。

Neovis.js将 JavaScript 可视化和Neo4j无缝集成。与Neo4j的连接非常简单明了，并且由于它是在Neo4j的属性图模型的基础上构建的，因此 Neovis 的数据格式与数据库保持一致。

之所以使用Neovis.js来实现图谱的加载，是因为后台使用的是Neo4j数据库，在前端正好有对应的js插件可以直接根据后端数据库的数据生成图谱，不需要后台再去进行一些数据的转换，从而生成节点和边的数据再返回前端，前端再用echarts去实现。这样就复杂了。

一、效果：

二、使用Neovis.js：

这里只讲前端的使用操作，前提是后端已经创建了neovis数据库服务

（1）首先，现在git上下载Neovis.js https://github.com/neo4j-contrib/neovis.js

（2）下载完成之后就是如下目录

（3） 将dist目录下的neovis.js以及neovis.js.map文件复制出来

（4）粘贴到你的vue项目的static文件夹下

（5）然后在index.html目录下引入neovis.js，jquery没有引入的话，也需要引入，他会用到jquery

<script src="./static/js/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="./static/neovis.js"></script>

（6）然后就是neovis的vue页面，里面一共四个地方需要修改，已经标注。其他的直接复制就行

<template>
    <div class="myDiv">
        <div id="viz"></div>
        Cypher query: <textarea rows="4" cols=50 id="cypher"></textarea><br>
        <input type="submit" value="Submit" id="reload" @click="submit">
        <input type="submit" value="Stabilize" id="stabilize" @click="stabilize">
</template>
<script>
export default {
    name: '',
    components: {},
    props: {},
    data() {
        return {
            viz: {} //定义一个viz对象
    mounted() { this.draw() }, //渲染
    methods: {
        submit() { 
            var cypher = $("#cypher").val();
            if (cypher.length > 3) {
                this.viz.renderWithCypher(cypher);
            } else {
                console.log("reload");
                this.viz.reload();
        stabilize() {
            this.viz.stabilize();
        draw() {
            var config = {
                container_id: "viz",
                server_url: "后端neo4j的地址",
                server_user: "neo4j用户名，一般是neo4j",
                server_password: "neo4j密码",
                labels: {
                    //"Character": "name",
                    "Character": {
                        "caption": "name",
                        "size": "pagerank",
                        "community": "community"
                        //"sizeCypher": "MATCH (n) WHERE id(n) = {id} MATCH (n)-[r]-() RETURN sum(r.weight) AS c"
                relationships: {
                    "INTERACTS": {
                        "thickness": "weight",
                        "caption": false
                //查询节点的语句，写成你们的
                initial_cypher: "match (n)-[r]->(m) return n,r,m;" 
            this.viz = new NeoVis.default(config);
            this.viz.render();
            console.log(this.viz);
</script>
<style lang="less" scoped>
.myDiv {
    width: 800px;
    height: 800px;
textarea {
    border: 1px solid lightgray;
    margin: 5px;
    border-radius: 5px;
#viz {
    width: 100%;
    height: 80%;
    border: 1px solid #f1f3f4;
    font: 22pt arial;
input {
    border: 1px solid #ccc;
</style>

完成。。缺点就是自己定义的用户名和密码都暴露在html中，不安全。

想要原生实现的参考博主： Neo4j前端可视化组件Neovis.js使用说明_牧野渔樵的博客-CSDN博客_neovis.js

随着互联网不断的发展，传统的关系型数据库如oracle，mysql已经难以支撑现下大数据量，高并发的场景了。于是，NoSQL横空出世，有像cassandra这样的column-based，像MongoDB这样document-based。今天在这里猎奇的是一个graph-based的数据库，Neo4j。Neovis.js将JavaScript可视化和Neo4j无缝集成。与Neo4j的连接非常简单明了，并且由于它是在Neo4j的属性图模型的基础上构建的，因此 Neovis 的数据格式与数据库保持一致。 这是一个 知识图谱 构建工具,最开始是对产品和领导为了做ppt临时要求配合做图谱展示的不厌其烦,做着做着就抽出一个目前看着还算通用的小工具， 知识图谱 可视化，仅供做 知识图谱 的小伙伴参考 小工具是前台是基于 vue + d3. js ,后台是springboot配合Neo4j. demo地址：. 实现 的基本功能: 新增节点,添 加 连线,快速添 加 节点和关系 节点的颜色和大小可修改 节点和关系的编辑,删除 导出成图片 csv导入 导出csv 添 加 图片和富文本 节点之间多个关系 增 加 直接执行cypher功能 后续优化: 新建单节点,节点的位置能指定(或者和鼠标点下的位置一致) over 2018-11-16 做出的图谱能够导出成图片 over 2018-11-16 支持导入功能,同时支持导出关系和节点 over 2018-11-17 输入一段文本,通过自然语言等手段,抽出实体和关系,编辑后 # 二选一 npm install -g cnpm --registry=https://registry.npm.taobao.org npm install cnpm -g --registry=https://registry.nlark.com cnpm i 2. 项目启动 yarn serve 3. 项目打包 yarn build 4. 使用lint检查并修复文件 yarn lint Customize configuration See . 二、代码功能清单 d3初始化 图查询更新视图 平移与缩放 鼠标浮动事件 鼠标单击事件 解决vue3+ts+vite中启动报错No known conditions for “./lib/locale/lang/zh-cn“ entry in “element-plus“ package echarts实现正负轴柱状图