py2neo+flask+cytoscape.js展示Neo4j图数据（贴源码）

  1. app.py 
    2. # coding=utf-8
from flask import Flask, jsonify, render_template
from py2neo import Graph
import py2neo.client.json
app = Flask(__name__)
graph = Graph()
def buildNodes(nodeRecord):
    data = {"id": str(nodeRecord['id']), "label": next(iter(nodeRecord['label']))}
    data.update(nodeRecord['n'])
    return {"data": data}
def buildEdges(relationRecord):
    data = {"source": str(relationRecord['start_id']), "target": str(relationRecord['end_id']), "relationship": relationRecord['type']}
    return {"data": data}
@app.route('/')
def index():
    return render_template('index.html')
@app.route('/graph')
def get_graph():
    nodes = list(map(buildNodes, py2neo.client.json.dehydrate(graph.run('MATCH (n) RETURN id(n) as id, labels(n) as label, n').data())))
    edges = list(map(buildEdges, py2neo.client.json.dehydrate(graph.run('MATCH (n1)-[r]->(n2) RETURN id(r) as id, id(n1) as start_id, id(n2) as end_id, type(r) as type, r').data())))
    return jsonify(elements = {"nodes": nodes, "edges": edges})
if __name__ == '__main__':
    app.jinja_env.auto_reload = True
    app.config['TEMPLATES_AUTO_RELOAD'] = True
    app.run(debug = True, host='10.110.41.71')

  2. getJsonData.js
    3. 

    $(function(){
  $.get('/graph', function(result) {
    var cy = cytoscape({
      container: document.getElementById('cy'),
      style: [
        { selector: 'node[label = "Person"]',
          style: {'background-color': '#6FB1FC', 'label': 'data(name)'}
        { selector: 'node[label = "Movie"]',
          style: {'background-color': '#F5A45D', 'label': 'data(title)'}
          selector: 'edge',
          style: {
            'width': 3,
            'line-color': 'blue',
            'target-arrow-color': 'red',
            'target-arrow-shape': 'triangle',
            'curve-style': 'bezier'
      layout: { name: 'cose'},
      elements: result.elements
  }, 'json');

  3. index.html
    4. 

    <!DOCTYPE html>
    <title>Cytoscape.js展示neo4j数据</title>
    <link href="/static/css/style.css" rel="stylesheet" />
    <script src="/static/js/jquery-3.6.0.min.js"></script>
    <script src="/static/js/cytoscape.min.js"></script>
    <script src="/static/js/getJsonData.js"></script>
</head>
  <h1>网络图</h1>
  <div id="cy"></div>
</body>
</html>

  4. style.css
    5. 

    /* cytoscape graph */
#cy {
    height: 600px;
    width: 1200px;
    background-color: #f9f9f9;

  5. py2neo.client.json.dehydrate方法解决该错误：
    
TypeError: Object of type map is not JSON serializable
    6. 

  6. 参考了以下链接：
    
https://www.jetbrains.com/pycharm/download/#section=windows
    
http://blog.csdn.net/zhongzhu2002/article/details/45843283
    
http://blog.csdn.net/zhongzhu2002/article/details/46043047
    
http://blog.csdn.net/zhongzhu2002/article/details/46049197
    
https://blog.csdn.net/weixin_39430584/article/details/83380636
    
https://dormousehole.readthedocs.io/en/latest/