vue结合Neovis.js实现知识图谱的加载

随着互联网不断的发展，传统的关系型数据库如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">
    </div>
</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

文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/149702.html