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

最新推荐文章于 2024-08-12 08:59:29 发布
最新推荐文章于 2024-08-12 08:59:29 发布
阅读量1.3w 收藏 45
点赞数 6
分类专栏： 前端开发 后台开发 文章标签： neo4j 可视化
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_32653877/article/details/71436301
版权

作者：翁松秀

用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绘图函数需要的数据格式.
最后调整绘图参数以达到绘图需求。
翁松秀
关注
专栏目录
Neo4j 图数据可视化之 Neovis.js 篇
Jennifer726的博客
07-27 6003
使用Neovis.js可视化Neo4j图数据的效果及如何实现
强大的可视化库——Vis.js
gitblog_00093的博客
05-10 1052
强大的可视化库——Vis.js 项目地址:https://gitcode.com/almende/vis :exclamation: 注意：本项目已不再维护！我们建议您转向 Visjs 社区的开源库。 Vis.js 是一个功能强大的浏览器端数据可视化工坊，专门设计用于处理大量动态数据，并支持数据交互操作。这个库由以下组件组成： DataSet 和 DataView：灵活的数据集，支持添加、更新...
推荐开源项目：React graph vis - 美观的网络图组件
最新发布
gitblog_00093的博客
08-12 292
推荐开源项目：React graph vis - 美观的网络图组件 react-graph-visA react component to render nice graphs using vis.js项目地址:https://gitcode.com/gh_mirrors/re/react-graph-vis 在大数据和可视化日益重要的今天，展示数据的关系和网络结构变得更加关键。React gr...
neovis.js：Neo4j + vis.js = neovis.js。 使用Neo4j中的数据在浏览器中图形化可视化
02-05
neovis.js 由vis.js支持的图形可视化以及来自Neo4j的数据。 产品特点 连接到Neo4j实例以获取实时数据 用户指定的标签和要显示的属性 用户指定的Cypher查询来填充 为节点的图像的URL指定节点属性 指定边缘厚度的边缘属性 指定社区/集群的节点属性 指定节点大小的节点属性 配置弹出窗口 安装 Neovis.js可以通过npm安装： npm install --save neovis.js 您还可以通过CDN获得neovis.js： CDN 为了便于使用，可以从Neo4jLabs CDN获得Neovis.js： 最新发行 <script src="h
vue-neo4j:vue使用D3对neo4j进行可视化
03-15
Neo4j Vue 安装步骤 克隆或下载该库到本地 下载neo4j并安装到本地，启动neo4j服务 进入到该工程的根目录，输入命令：npm run update进行npm包的导入 使用命令：npm run dev启动该工程 默认端口是：8081 neo4j账号信息： 网址：bolt：// localhost 用户名：neo4j 密码：密码 启动服务 npm run dev并将您的Web浏览器指向http://localhost:8081 。 项目截图 目录结构 ├──index.html入口页面─────────────────────────────────────────────────────────────── dev-client.js开发服务器热重载脚本，主要实现实现开发阶段的页面自动刷新│├──dev-server.js运行本地开发服务器│├──utils.js构建相
“d3.js可视化neo4j图数据库”项目中必要的js、css文件
07-23
是一个网页框架需要用到的js、css文件，也是“d3.js可视化neo4j图数据库”这个项目中需要用到的js、css文件，如果对这个项目感兴趣的可以关注我的专栏：https://blog.csdn.net/column/details/23743.html
Neo4j-js：一个退役的纯JavaScript Neo4j客户端库
gitblog_00018的博客
06-22 334
Neo4j-js：一个退役的纯JavaScript Neo4j客户端库 neo4j-jsA Node.js (pure JavaScript) client library for accessing neo4j databases with batch support.项目地址:https://gitcode.com/gh_mirrors/ne/neo4j-js 请注意：本文档涉及的neo4j...
neovis.js：Neo4j + vis.js = neovis.js。 使用Neo4j中的数据在浏览器中图形化可视化-源码
12-06
由vis.js支持的图形可视化以及来自Neo4j的数据。 产品特点 连接到Neo4j实例以获取实时数据 用户指定的标签和要显示的属性 用户指定的Cypher查询来填充 为节点的图像的URL指定节点属性 指定边缘厚度的边缘属性 指定...
neovis.js 由Neo4j的数据在浏览器图形化可视化
03-17
由vis.js支持的图形可视化以及来自Neo4j的数据。 产品特点 连接到Neo4j实例以获取实时数据 用户指定的标签和要显示的属性 用户指定的Cypher查询来填充 为节点的图像的URL指定节点属性 指定边缘厚度的边缘属性 指定...
使用Neo4j中的数据在浏览器中图形化可视化
06-17
由vis.js支持的图形可视化以及来自Neo4j的数据。 产品特点 连接到Neo4j实例以获取实时数据 用户指定的标签和要显示的属性 用户指定的Cypher查询来填充 为节点的图像的URL指定节点属性 指定边缘厚度的边缘属性 指定...
“d3.js可视化neo4j图数据库”需要用到的测试数据样例
qq_15783243的博客
11-13 1659
在进行d3进行neo4j数据查询和展示的时候我们可以先通过基本的json样例进行测试，成功展示相应的效果后再根据我们自己的neo4j数据库数据定义情况进行相应的调整 样例1： {"nodes":[{"name":"张三","id":1971},{"name":"李四","id":1972}], "links":[{"source&q
neo4j-js:一个Node.js（纯JavaScript）客户端库，用于通过批处理支持访问neo4j数据库
04-17
停产通知 此库已弃用。 它多年来没有更新，并且将不以任何方式得到支持。 您应该选择其他Neo4j库。 该存储库仅出于历史目的而存在。 neo4j-js 一个Node.js（纯JavaScript）客户端库，用于通过批处理支持访问neo4j数据库。 目标 支持尽可能多（或全部）REST API。 批处理（手动和自动快捷方式）。 具有直观的“过载”功能，以提高可用性。 没有依赖项的纯JavaScript。 基本原理（或者，为什么要为Neo4j使用另一个Node.js库？） 一个针对neo4j的Node.js客户端库已经存在： : 。 自2011年以来一直存在，对于需要在不久的将来需要可靠解决方案的Node.js / neo4j项目来说，它可能是一个不错的选择。 看了node-neo4j ，我发现了一些促使我编写自己的库的东西： 没有批量支持 奇数节点创建语法 发展似乎停滞了
可视化图表库Vis.js 可构建近100种图表类型
01-14
Vis.js是一款基于JavaScript的可视化图表库，vis.js不像其他的图表库那样仅仅支持几种常用的数据图表，比如线形图、柱状图、饼图等，Vis.js支持上百种不同类型的可视化图表类型，比如时间线图、网络图、2D图表、3D图表，每一种类型的图表下又包含几十种不同展现方式的数据图表。 更为让人震撼的是，Vis.js图表都是动态的，也就是说你可以拖动每一个数据节点来让图表数据进行动态排列。
Vis.js – 基于浏览器的动态 JavaScript 可视化库
weixin_33969116的博客
10-29 609
Vis.js – 基于浏览器的动态 JavaScript 可视化库 一、总结 一句话总结：Vis.js 是一个动态的，基于浏览器的可视化库。该库被设计为易于使用，能处理大量的动态数据。该库由以下几部分组成：一是数据集和数据视图，基于灵活的键/值数据集，可以添加，更新和删除项目，订阅数据集变化；二是时间轴，用于显示不同类型的时间轴数据，在时间轴上项目可以交互移动，缩放和操纵；三是图形，使用节点和...
neo4j web可视化 echarts django
Qq2466930350的博客
10-08 1447
原博主的代码取得是name作为关系的连接条件，但是发现自己的数据name有重复值，可能识别不出来，所以一直不出图。因为自己的数据有一个id，（自己编好的，并且关系也是通过id确定开始和结尾的），所以修改了代码，改成了取id。因为原博同时定义了全局变量和局部变量哈哈哈哈哈，最后是局部变量起作用了，就修改了下。问题⑥：设置了提示框！可以显示节点的属性内容。问题②：原博的搜索语句，限制了标签，因为我的标签相对较多，所以修改了下语句。问题③：搜索的时候同样遇到问题，假如有同名的怎么办？
neo4j数据可视化_我如何使用neo4j可视化来自半结构化数据的连接
weixin_26729165的博客
10-10 1810
neo4j数据可视化Graph databases are powerful structures to visualize connections between entities that miss a structured format in them. This tutorial is a step by step approach for generating simple graphs...
【Neo4j可视化工具2】yworks neo4j-explorer连接本地数据库与操作
m0_65797987的博客
01-25 2005
yworks neo4j-explorer是可在web端免费使用的一个Neo4j可视化工具。本文介绍其连接本地数据库的方式，然后进行一些简单演示。
vis.js
weixin_30868855的博客
04-22 143
1、官网：http://visjs.org/docs/network/ 2、示例： <!doctype html>　　<html> 　　　　<head> 　　　　<title>vis.js</title> 　　　　<script type="text/javascript" src="vis.js"...
neo4j导出html,Neo4j前端可视化组件Neovis.js使用说明
weixin_39836063的博客
07-03 2562
Neo4j前端可视化组件Neovis.js使用说明Neo4j前端可视化组件Neovis.js使用说明Neovis.js将JavaScript可视化和Neo4j无缝集成。与Neo4j的连接非常简单明了，并且由于它是在Neo4j的属性图模型的基础上构建的，因此 Neovis 的数据格式与数据库保持一致。在单个配置对象中定义基于标签、属性、节点和关系的自定义和着色样式。在使用的过程中，发现了该库的一个缺...
在JSP页面如何利用vis.js画出neo4j中的关系图
06-06
要在 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、付费专栏及课程。

余额充值