用vis.js庫實現Neo4j的可視化
vis.js簡介
功能需求
實現步驟
1. 獲取查詢結果
2. 轉換數據格式
3. 指定繪圖容器
4. 配置繪圖參數
5. 繪圖實例參考
最終結果
總結
vis.js簡介
vis.js是一個基於瀏覽器的動態可視化庫，這個可視化庫易於上手使用，而且可以處理高量級的動態數據，並且能夠與數據進行交互。
vis.js由五部分組成：
DataSet
Timeline
Network
Graph2d
Graph3d
功能需求
模仿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.
}
具體繪圖函數和參數可參考[這兒]
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繪圖函數需要的數據格式.
最后調整繪圖參數以達到繪圖需求。
————————————————
版權聲明：本文為CSDN博主「翁松秀」的原創文章，遵循 CC 4.0 BY-SA 版權協議，轉載請附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/qq_32653877/article/details/71436301