用cytoscape.js展示neo4j网络关系图 - 3. cytoscape.js

最新推荐文章于 2024-09-09 20:35:21 发布

钟柱

最新推荐文章于 2024-09-09 20:35:21 发布

阅读量3.2w

点赞数 13

分类专栏： neo4j 文章标签： neo4j cytoscape flask py2neo

本文链接：https://blog.csdn.net/zhongzhu2002/article/details/46049197

版权

本文介绍了如何利用cytoscape.js展示Neo4j数据库中的网络关系图，通过Flask和py2neo获取数据，然后用cytoscape.js将数据转化为JSON并绘制图形。文章详细讲解了cytoscape.js的基本概念和配置，以及如何将Neo4j的数据转换为适合cytoscape.js的格式。

摘要由CSDN通过智能技术生成

用可视化的方式来展示网络关系图是一件挺有趣的事情，在选定用cytoscape.js来显示neo4j图形数据库的数据后我做了一个原型，并用下面三篇博客来记录了做原型的过程。

要完成的功能

要把neo4j数据库里面的Movie数据正确的显示到前端，我们需要完成如下的功能。

上一篇博客介绍了如何用py2neo来获取neo4j的节点及关系，现在我们要用cytoscape.js来把用neo4j取得的节点和关系显示到网页上。

先看看cytoscape.js是什么

cytoscape是一个网络图的可视化工具，大量的生物分子/基因领域的公司用它来做可视化分析。由于它的通用性，慢慢的也被其他领域的人用来做网络的可视化和分析。cytoscape分为两种，一种叫做cytoscape desktop，是一个桌面软件，可以把数据导入然后生成可视化的网络图进行分析；另一种叫做cytoscape.js，是一个javascript库，主要给开发人员使用，来在网页上生成可视化的网络图。我们要用的是后者。

neo4j有三个概念：图(Graph)，节点(Node)和关系(Relationship)。cytoscape.js也有三个对应的概念：图（用方法cytoscape()来生成），节点(Node)和边(Edge)。

下面是用cytoscape.js画图的典型方法。

var cy = cytoscape({
  container: document.getElementById('cy'), 
  elements: {
    nodes: [/* ... */ ],
    edges: [/* ... */ ]
  },
  style: [ /* ... */ ],
  layout: { name: 'cose' }
});

主要是用cytoscape()函数生成cy，并填充其各种属性（如：container, elements, style, layout等等）。让我们来写个简单的网页来生成下面的图。所有的代码都在一个html文件中，你可以把它存成index.html，然后用浏览器直接打开看效果。

这里写图片描述

<!DOCTYPE html>
<html>
<head>
    <title>Learning Cytoscape.js</title>
    <style type="text/css">
        /* cytoscape graph */
        #cy {
            height: 300px;
            width: 400px;
            background-color: #f9f9f9;
        }
    </style>
    <script src="http://cdn.bootcss.com/jquery/1