[12屆 鐵人賽] [Day24] Neovis.js 與 Neo4j 實作範例 === ###### tags: `iT鐵人賽` `Neo4j` ## 前情提要 明天要放假了，公司的進度大爆炸 想說在一個 Interface 開一個新的 Function，以配合底層引擎 而那個新 Function 是由現有 Function 拆出來的 殊不知，那個 Interface 底下那一坨，繼承他的 Class 有些有那個功能，有的沒有，數量又多 我看這個雙十是要加班了 好像打太長了w 上一篇簡單提了一下關於 Neo4j 與前端技術的串接 這篇就來抓其中提到的 `Neovis.js` 來實際實作一次看看效果吧 > 內容警告 : > 小弟為後端工程師，對 JS 什麼的一竅不通 > 如果寫得很爛請見諒 ## Neovis.js 上一篇提過，`Neovis.js` 是 Neo4j 官方提供的 JS 套件 這邊就依照官方範例，結合從之前就用到現在的資料庫類型的資料庫 來做這次的範例吧 首先先來回憶一下，我們的資料庫在 Neo4j 裡的長相吧 ![](https://i.imgur.com/KsR8K2P.png) 接下來，來嘗試連接 `Neovis.js` ```htmlmixed= <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` 裡下你的查詢語句 就可以很簡單的取得你需要的資料 來看看呈現結果吧 ![](https://i.imgur.com/tqUI6sG.png) 長得有點微妙呢 ```javascript "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 與經緯度** 究竟鐵人賽能不能完賽呢，讓我們繼續看下去 --- ## My Source Code [Github Link](https://github.com/flyxiang1206/NeoTest) ## 參考資料 [Graph Visualization With Neo4j Using Neovis.js](https://medium.com/neo4j/graph-visualization-with-neo4j-using-neovis-js-a2ecaaa7c379) ## 紀錄 撰寫日期：2020/10/08 耗時： 1 小左右