antecedentes:
En la actualidad, existe tal demanda que se requiere la base de datos de gráficos de Neo4j para almacenar la relación de sangre a nivel de tabla, y el gráfico de relación de sangre debe mostrarse en la página de inicio;
el navegador incorporado de Neo4j no se puede integrar en el proyecto de interfaz, por lo que se requiere tecnología de interfaz.
parte trasera:
Primero obtenga los datos en neo4j y analícelos en formato json (la razón por la que se analizan en formato json es debido a las necesidades de D3.js)
- Se requieren las siguientes dos dependencias del paquete jar:
- Conecte neo4j, obtenga el resultado de datos
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");
- Aquí 1, 2, 3 son el sourceVertex-edge-targetVertex de los datos del gráfico, y todos los tipos son mapas;
resultSet.getObject(1);
resultSet.getObject(2);
resultSet.getObject(3);
- Convierta el vértice y el borde del tipo de mapa a JavaBean respectivamente
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;
}
-
Más convertido a datos en formato json
-
Se analiza más en el siguiente formato
{
"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"
}
]
}
}
]
}
]
}
Interfaz:
- Introduzca los datos json adquiridos en 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
});
- Lograr efecto
- Referencia de front-end:
https://github.com/eisman/neo4jd3