用vis.js库实现Neo4j的可视化

作者:翁松秀


用vis.js库实现Neo4j的可视化


vis.js简介

vis.js是一个基于浏览器的动态可视化库,这个可视化库易于上手使用,而且可以处理高量级的动态数据,并且能够与数据进行交互。
vis.js由五部分组成:

DataSet
Timeline
Network
Graph2d
Graph3d

功能需求

Neo4j基于D3.js实现的可视化
模仿Neo4j Community Edition上查询结果展示的结果,将neo4j的查询结果可视化。

实现步骤

1. 获取查询结果
将查询语句传给服务器,并将查询结果存到特定格式的JSON格式
    /*
    nodes:id,label,properties
    edges:id,source,target,title
    */
data = {
            nodes: nodes,
            edges: edges
        };
2. 转换数据格式
在Neo4j中以label来分类,但vis.js中如果想要实现分类(如不同类别的节点分别绘不同颜色)就得以group来实现分类。所以需要写一个函数来转换一下数据,将label转换为group,把一个property赋给label。
    for (index in inputJsonData.nodes) {
            var node = {};
            node.id = inputJsonData.nodes[index]['id'];
            node.label = inputJsonData.nodes[index]['title'];
            node.group = inputJsonData.nodes[index]['label'];
            nodes[node.id] = node;
        }
3. 指定绘图容器
graph = new vis.Graph(graph_container, data, options);
将绘图函数中的绘图容器参数graph_container赋为要展示的页面div。
4. 配置绘图参数
可以设置绘图函数的节点、边、分组、布局、交互等参数,来实现不同的绘图需求。
var options = {
  autoResize: true,
  height: '100%',
  width: '100%'
  locale: 'en',
  locales: locales,
  clickToUse: false,
  configure: {...},    // defined in the configure module.
  edges: {...},        // defined in the edges module.
  nodes: {...},        // defined in the nodes module.
  groups: {...},       // defined in the groups module.
  layout: {...},       // defined in the layout module.
  interaction: {...},  // defined in the interaction module.
  manipulation: {...}, // defined in the manipulation module.
  physics: {...},      // defined in the physics module.
}
具体绘图函数和参数可参考[这儿][2]
5. 绘图实例参考

vis.js官网上的绘图实例,更多绘图实例可以参考这儿

<html><head>
  <title>Network | Basic usage</title>

  <script type="text/javascript" src="../../dist/vis.js"></script>
  <link href="../../dist/vis-network.min.css" rel="stylesheet" type="text/css">

  <style type="text/css">
    #mynetwork {
      width: 600px;
      height: 400px;
      border: 1px solid lightgray;
    }
  </style>
</head>
<body>

<p>
  Create a simple network with some nodes and edges.
</p>

<div id="mynetwork"><div class="vis-network" tabindex="900" style="position: relative; overflow: hidden; touch-action: pan-y; user-select: none; -webkit-user-drag: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); width: 100%; height: 100%;"><canvas width="600" height="400" style="position: relative; touch-action: none; user-select: none; -webkit-user-drag: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); width: 100%; height: 100%;"></canvas></div></div>

<script type="text/javascript">
  // create an array with nodes
  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'}
  ]);

  // create an array with edges
  var edges = new vis.DataSet([
    {from: 1, to: 3},
    {from: 1, to: 2},
    {from: 2, to: 4},
    {from: 2, to: 5},
    {from: 3, to: 3}
  ]);

  // create a network
  var container = document.getElementById('mynetwork');
  var data = {
    nodes: nodes,
    edges: edges
  };
  var options = {};
  var network = new vis.Network(container, data, options);
</script>
</body>
</html>

最终结果

可视化结果

总结

需要先获取查询结果,然后将查询结果存到一定格式的JSON,再经数据格式转换函数将数据转换成vis.js绘图函数需要的数据格式.
最后调整绘图参数以达到绘图需求。
要在 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.getJSONArray("results").getJSONObject(0).getJSONArray("data"); for (int i = 0; i < records.length(); i++) { JSONObject record = records.getJSONObject(i); JSONObject node = record.getJSONObject("n"); JSONObject rel = record.getJSONObject("r"); JSONObject target = record.getJSONObject("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 的关系图了。
评论 8
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

翁松秀

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值