在JSP页面如何简单画出neo4j中的关系图并实现增删改查
时间: 2024-03-08 21:47:08 浏览: 24
要在JSP页面中画出Neo4j中的关系图,可以使用Neo4j提供的JavaScript库,例如d3.js或者vis.js。
下面以vis.js为例,介绍如何在JSP页面中画出Neo4j中的关系图,并实现增删改查操作。
1. 在JSP页面中引入vis.js和vis-network.css文件。
```html
<link rel="stylesheet" type="text/css" href="vis-network.css">
<script type="text/javascript" src="vis.js"></script>
```
2. 创建一个空的div元素,用于展示关系图。
```html
<div id="mynetwork"></div>
```
3. 在JSP页面中定义一个JavaScript变量,用于存储关系图的数据。
```javascript
var nodes = new vis.DataSet([
{id: 1, label: 'Node 1'},
{id: 2, label: 'Node 2'},
{id: 3, label: 'Node 3'},
{id: 4, label: 'Node 4'},
{id: 5, label: 'Node 5'}
]);
var edges = new vis.DataSet([
{from: 1, to: 2},
{from: 1, to: 3},
{from: 2, to: 4},
{from: 2, to: 5}
]);
var data = {
nodes: nodes,
edges: edges
};
```
4. 使用Neo4j提供的REST API获取数据,并将数据转换成vis.js需要的格式。
例如,使用Neo4j的REST API获取所有节点和关系:
```javascript
var xhr = new XMLHttpRequest();
xhr.open("GET", "http://localhost:7474/db/data/transaction/commit", true);
xhr.setRequestHeader("Content-Type", "application/json");
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status === 200) {
var response = JSON.parse(xhr.responseText);
var nodes = response.results[0].data.map(function (row) {
return {id: row.graph.nodes[0].id, label: row.graph.nodes[0].labels[0]};
});
var edges = response.results[0].data.map(function (row) {
return {from: row.graph.relationships[0].startNode, to: row.graph.relationships[0].endNode};
});
var data = {
nodes: new vis.DataSet(nodes),
edges: new vis.DataSet(edges)
};
var container = document.getElementById('mynetwork');
var options = {};
var network = new vis.Network(container, data, options);
}
};
xhr.send(JSON.stringify({statements: [{statement: "MATCH (n)-[r]->(m) RETURN n,r,m"}]}));
```
5. 使用vis.js提供的API实现增删改查操作。
例如,添加一个节点:
```javascript
var newNode = {id: 6, label: 'Node 6'};
nodes.add(newNode);
```
删除一个节点:
```javascript
nodes.remove(6);
```
更新一个节点:
```javascript
var updatedNode = {id: 1, label: 'Updated Node 1'};
nodes.update(updatedNode);
```
查询一个节点:
```javascript
var node = nodes.get(1);
```
以上就是在JSP页面中使用vis.js画出Neo4j中的关系图,并实现增删改查操作的步骤。需要注意的是,使用Neo4j的REST API获取数据时需要设置跨域请求的头部信息,否则会出现跨域请求失败的问题。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)