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

关注“AI工程师笔记”微信公众号

发送关键字“图数据库”获取示例代码。

背景:

目前存在这样的需求，需要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;
}
1
2
3
4

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

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

resultSet.getObject(1);
resultSet.getObject(2);
resultSet.getObject(3);
1
2
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;
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

• 进一步转化为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"
                            }
                        ]
                    }
                }
            ]
        }
    ]
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72

前端:

• 前端部分采用开源框架D3.js:
  https://github.com/eisman/neo4jd3

• 将后台获取到的json数据传给前端：
  
  index.html中修改neo4jDataUrl：

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、访问接口
    neo4jDataUrl: '/neo/query',
    ## 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
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74

对应的后台接口：

@RequestMapping("/index")
public String login(){
    return "index";
}

@ResponseBody
@RequestMapping("/neo/query")
public String view(){
    String graphJson = neo4j_service.getGraphJson("xx电压", "MWT_UD_XX_XXXX");
    return graphJson;
}
1
2
3
4
5
6
7
8
9
10
11

• 实现效果

D3.js展示点上的文字默认是该点的id，如想自定义要展示的内容。可以修改neo4jd3.js文件：

function appendTextToNode(node) {
    return node.append('text')
               .attr('class', function(d) {
                   return 'text' + (icon(d) ? ' icon' : '');
               })
               .attr('fill', '#ffffff')
               .attr('font-size', function(d) {
                   return icon(d) ? (options.nodeRadius + 'px') : '10px';
               })
               .attr('pointer-events', 'none')
               .attr('text-anchor', 'middle')
               .attr('y', function(d) {
                   return icon(d) ? (parseInt(Math.round(options.nodeRadius * 0.32)) + 'px') : '4px';
               })
               .html(function(d) {
                   var _icon = icon(d);
                   //return _icon ? '&#x' + _icon : d.id;
                   return _icon ? '&#x' + _icon : d.properties.tableName;
               });
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

如上.html中的修改，默认展示id，修改成展示properties中的tableName