明天要放假了，公司的進度大爆炸
想說在一個 Interface 開一個新的 Function，以配合底層引擎
而那個新 Function 是由現有 Function 拆出來的
殊不知，那個 Interface 底下那一坨，繼承他的 Class
有些有那個功能，有的沒有，數量又多
我看這個雙十是要加班了
好像打太長了w
上一篇簡單提了一下關於 Neo4j 與前端技術的串接
這篇就來抓其中提到的 Neovis.js
來實際實作一次看看效果吧
內容警告 :
小弟為後端工程師，對 JS 什麼的一竅不通
如果寫得很爛請見諒
上一篇提過，Neovis.js 是 Neo4j 官方提供的 JS 套件
這邊就依照官方範例，結合從之前就用到現在的資料庫類型的資料庫
來做這次的範例吧
首先先來回憶一下，我們的資料庫在 Neo4j 裡的長相吧
接下來，來嘗試連接 Neovis.js
<html>
<head>
<title>DataViz</title>
<style type="text/css">
#viz {
width: 100%;
height: 100%;
}
</style>
<script src="https://cdn.neo4jlabs.com/neovis.js/v1.5.0/neovis.js"></script>
</head>
<body onload="draw()">
<div id="viz"></div>
<script>
function draw() {
var config = {
container_id: "viz",
server_url: "bolt://localhost:7687",
server_user: "neo4j",
server_password: "123456",
labels: {
"Name": {
caption: "Name",
sizeCypher: "MATCH (n) WHERE id(n) = $id MATCH (n)-[r]->() RETURN Count(r) +50 "
}
},
relationships: {
"Have": {
},
"Type": {
}
},
initial_cypher: "match p=()-[]->() return p",
arrows: true
}
var viz = new NeoVis.default(config);
viz.render();
}
</script>
</body>
</html>
官方都幫你做好了，你只要在 initial_cypher 裡下你的查詢語句
就可以很簡單的取得你需要的資料
來看看呈現結果吧
長得有點微妙呢
"Name": {
caption: "Name",
sizeCypher: "MATCH (n) WHERE id(n) = $id MATCH (n)-[r]->() RETURN Count(r) +50 "
}
你可以在 Node 或是 Relationships 的屬性裡添加 caption
來決定要使那個 Property 呈現在畫面上
或是 sizeCypher 用 Cypher 來決定該 Node 的大小喔
對於前端相關的介紹就差不多到這邊了
最後如果沒東西寫，可能會把上一篇提到的
將 Neo4j 回傳的資料，包成 Vis.js 可以接的格式
這件事在寫成一篇吧
總之，今天就到這了
下一篇是之前就立旗很久的，空間座標的主題，有點小期待呢
下篇 Spatial values - Neo4j 與經緯度
究竟鐵人賽能不能完賽呢，讓我們繼續看下去
Graph Visualization With Neo4j Using Neovis.js
排版好看的版本同步更新在我的 HackMD
iThome鐵人賽
看影片追技術