要在
JSP 页面
中使用 vis.
js 绘制 Neo4j 的关系图，需要完成以下步骤：
1. 引入 vis.
js 的 JavaScript 和 CSS
文件。可以通过在
JSP 页面
中添加以下代码来实现：
```html
<link href="vis.min.css" rel="stylesheet" type="text/css" />
<script src="vis.min.
js"></script>
```
其
中，`vis.min.css` 和 `vis.min.
js` 分别是 vis.
js 的 CSS 和 JavaScript
文件。
2. 准备数据。在
JSP 页面
中，需要将 Neo4j
中的数据转换为 vis.
js 所需的格式。可以通过使用 Neo4j 的 REST API 将数据转换为
JSON 格式，然后在
JSP 页面
中将其解析为 JavaScript 对象。
例如，以下代码展示了如何使用 Neo4j 的 REST API 获取节点和关系数据，然后将其转换为 vis.
js 所需的格式：
```java
String cypher = "MATCH (n)-[r]->(m) RETURN n, r, m";
String url = "http://localhost:7474/db/data/transaction/commit";
String query = "{\"statements\":[{\"statement\":\"" + cypher + "\"}]}";
String response = HttpUtils.post(url, query);
JSONArray nodes = new
JSONArray();
JSONArray edges = new
JSONArray();
JSONObject result = new
JSONObject(response);
JSONArray records = result.get
JSONArray("results").get
JSONObject(0).get
JSONArray("data");
for (int i = 0; i < records.length(); i++) {
JSONObject record = records.get
JSONObject(i);
JSONObject node = record.get
JSONObject("n");
JSONObject rel = record.get
JSONObject("r");
JSONObject target = record.get
JSONObject("m");
nodes.put(new
JSONObject()
.put("id", node.getLong("id"))
.put("label", node.getString("name")));
nodes.put(new
JSONObject()
.put("id", target.getLong("id"))
.put("label", target.getString("name")));
edges.put(new
JSONObject()
.put("from", node.getLong("id"))
.put("to", target.getLong("id"))
.put("label", rel.getString("type")));
}
JSONObject data = new
JSONObject()
.put("nodes", nodes)
.put("edges", edges);
```
3. 创建 vis.
js 的 Network 实例。在
JSP 页面
中，可以通过以下代码创建 vis.
js 的 Network 实例：
```javascript
var container = document.getElementById("network");
var options = {
// 配置项
};
var network = new vis.Network(container, data, options);
```
其
中，`container` 是一个 HTML 元素，用于容纳关系图。`data` 是 vis.
js 所需的数据格式。`options` 是 vis.
js 的配置项，用于设置关系图的样式、交互和行为等。
4. 在
JSP 页面
中添加 HTML 元素。可以通过在
JSP 页面
中添加以下代码来创建一个容纳关系图的 HTML 元素：
```html
<div id="network"></div>
```
这样，就可以在
JSP 页面
中利用 vis.
js 绘制 Neo4j 的关系图了。
扫一扫
1225
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
