使用D3.js进行Neo4j数据的前端展示

背景:

目前存在这样的需求，需要Neo4j图数据库存储表级血缘关系，血缘关系图要在前端页面进行展示；
Neo4j自带的浏览器方式无法集成到前端项目中，因此需要采用前端技术。

后端:

首先获取neo4j中的数据，解析成json格式（之所以解析成json格式是因为D3.js的需要）

• 需要以下两个jar包依赖:
  
• 连接neo4j，获取到数据resultSet

private Connection getNeo4jConnection() throws SQLException {
        Connection conn = DriverManager.getConnection("jdbc:neo4j:bolt://192.168.1.183:7687/","neo4j","xxx");
        return conn;
}

Connection conn = getNeo4jConnection();
Statement statement = conn.createStatement();
ResultSet resultSet = statement.executeQuery("match(n:Table)-[r]->(m:Table) where n.tableName='"+tableName+"' return n,r,m");

• 这里1,2,3分别为图数据的sourceVertex-edge-targetVertex，类型均为map;

resultSet.getObject(1);
resultSet.getObject(2);
resultSet.getObject(3);

• 将map类型的vertex和edge分别转换为JavaBean

private DataVertex vertextDataToJson(HashMap hashMap){
        String jsonString = JSON.toJSONString(hashMap);
        JSONObject jsonObject = JSONObject.parseObject(jsonString);
        String id = jsonObject.getString("_id");
        JSONArray labels = jsonObject.getJSONArray("_labels");
        String labelStr = labels.getString(0);
        String dbName = jsonObject.getString("dbName");
        String tableName = jsonObject.getString("tableName");
        String tid = jsonObject.getString("tid");

        VertextTable vertextTable = new VertextTable();
        vertextTable.setTid(tid);
        vertextTable.setDbName(dbName);
        vertextTable.setTableName(tableName);

        DataVertex dataVertex = new DataVertex();
        dataVertex.setId(id);
        String[] labelArr = {labelStr};
        dataVertex.setLabels(labelArr);
        dataVertex.setProperties(vertextTable);

        //String vertexJsonStr = JSON.toJSONString(dataVertex);

        return dataVertex;
    }

    private DataEdge edgeDataToJson(HashMap hashMap){
        String jsonString = JSON.toJSONString(hashMap);
        JSONObject jsonObject = JSONObject.parseObject(jsonString);
        String id = jsonObject.getString("_id");
        String type = jsonObject.getString("_type");
        String startId = jsonObject.getString("_startId");
        String endId = jsonObject.getString("_endId");

        DataEdge dataEdge = new DataEdge();
        dataEdge.setId(id);
        dataEdge.setType(type);
        dataEdge.setStartNode(startId);
        dataEdge.setEndNode(endId);

        //String edgeJsonStr = JSON.toJSONString(dataEdge);

        return dataEdge;
    }

• 进一步转化为json格式数据
  

• 进一步解析成如下格式

{
    "results":[
        {
            "data":[
                {
                    "graph":{
                        "nodes":[
                            {
                                "id":"20",
                                "labels":[
                                    "Table"
                                ],
                                "properties":{
                                    "dbName":"default",
                                    "tableName":"yj_experience_exchange",
                                    "tid":"-90850102"
                                }
                            },
                            {
                                "id":"20",
                                "labels":[
                                    "Table"
                                ],
                                "properties":{
                                    "dbName":"default",
                                    "tableName":"yj_experience_exchange",
                                    "tid":"-90850102"
                                }
                            },
                            {
                                "id":"99",
                                "labels":[
                                    "Table"
                                ],
                                "properties":{
                                    "dbName":"default",
                                    "tableName":"yj_usermanage_addressperson",
                                    "tid":"-551747000"
                                }
                            },
                            {
                                "id":"0",
                                "labels":[
                                    "Table"
                                ],
                                "properties":{
                                    "dbName":"default",
                                    "tableName":"v_yj_department",
                                    "tid":"-1044322601"
                                }
                            }
                        ],
                        "relationships":[
                            {
                                "endNode":"0",
                                "id":"20",
                                "startNode":"20",
                                "type":"generate"
                            },
                            {
                                "endNode":"99",
                                "id":"116",
                                "startNode":"20",
                                "type":"generate"
                            }
                        ]
                    }
                }
            ]
        }
    ]
}

前端:

• 将获取到的json数据引入到js中
  

var neo4jd3 = new Neo4jd3('#neo4jd3', {
    highlight: [
        {
            class: 'Project',
            property: 'name',
            value: 'neo4jd3'
        }, {
            class: 'User',
            property: 'userId',
            value: 'eisman'
        }
    ],
    icons: {
        'Api': 'gear',
        'BirthDate': 'birthday-cake',
        'Cookie': 'paw',
        'Email': 'at',
        'Git': 'git',
        'Github': 'github',
        'Ip': 'map-marker',
        'Issues': 'exclamation-circle',
        'Language': 'language',
        'Options': 'sliders',
        'Password': 'asterisk',
        'Phone': 'phone',
        'Project': 'folder-open',
        'SecurityChallengeAnswer': 'commenting',
        'User': 'user',
        'zoomFit': 'arrows-alt',
        'zoomIn': 'search-plus',
        'zoomOut': 'search-minus'
    },
    images: {
        'Address': 'img/twemoji/1f3e0.svg',
        'BirthDate': 'img/twemoji/1f5d3.svg',
        'Cookie': 'img/twemoji/1f36a.svg',
        'CreditCard': 'img/twemoji/1f4b3.svg',
        'Device': 'img/twemoji/1f4bb.svg',
        'Email': 'img/twemoji/2709.svg',
        'Git': 'img/twemoji/1f5c3.svg',
        'Github': 'img/twemoji/1f5c4.svg',
        'icons': 'img/twemoji/1f38f.svg',
        'Ip': 'img/twemoji/1f4cd.svg',
        'Issues': 'img/twemoji/1f4a9.svg',
        'Language': 'img/twemoji/1f1f1-1f1f7.svg',
        'Options': 'img/twemoji/2699.svg',
        'Password': 'img/twemoji/1f511.svg',
        'Project|name|d3': 'img/twemoji/32-20e3.svg',
        'Project|name|neo4j': 'img/twemoji/33-20e3.svg',
        'Project|name|neo4jd3': 'img/twemoji/31-20e3.svg',
        'User': 'img/twemoji/1f600.svg'
    },
    minCollision: 60,
    ## 1、json数据路径
    neo4jDataUrl: 'json/neo4jData.json',
    ## 2、json数据(示例)
    neo4jData: '{"hhh":"ggg","jjj":"fff"}',
    
    nodeRadius: 25,
    onNodeDoubleClick: function(node) {
        switch(node.id) {
            case '25':
                // Google
                window.open(node.properties.url, '_blank');
                break;
            default:
                var maxNodes = 5,
                    data = neo4jd3.randomD3Data(node, maxNodes);
                neo4jd3.updateWithD3Data(data);
                break;
        }
    },
    zoomFit: true
});

• 实现效果

• 前端部分参考:
  https://github.com/eisman/neo4jd3

本文地址：https://blog.csdn.net/weixin_44455388/article/details/107250417