初次使用Neo4j到Neovis.js

作者非工程師,用詞難免不精確,僅為自己紀錄實作過程
需求
1.將系統間的關聯資訊圖像化
2.讓圖像能夠呈現在網頁上讓組織內所有人access
3.資料不能外流
實作天數
兩天
註:使用Neo4j之前使用過 d3-process-map 也是很不錯的圖像化呈現工具
[ d3-process-map實作 ]

A・建立local端環境
完全參考 這篇文章 中的 [Neo4j環境配置]。
我使用的電腦是macbook,中間有碰到找不到對應的JVM版本的問題。解決方法:若是說少了JVM version 1.7就去下載JDK 7,如果是少JVM version 1.8就去下載JDK 8。
能夠連到 http://localhost:7474/ 就代表可以在local環境下跑Neo4j了。
B・改寫資料邏輯
local端上Neo4j有給了兩個範例,一個是電影對應演員、導演等等,另一個是賣場產品、產品類型、顧客、顧客訂單等等。
一開始我先follow電影的範例code,手動 CREATE 單獨的 object 還有建立 object 彼此之間的 relation 。
確定簡單的資料跑得出來的時候,再開始對照賣場的範例code,開始研究怎麼使用 import csv 的方式跑圖出來。
C・import csv
在local端要讀取csv很簡單,就把csv file放到 neo4j/import/ 這個目錄底下,打 LOAD CSV WITH HEADERS FROM "file:///csv_file_name.csv" AS line 就可以讀到csv檔了。
讀檔進來之後,開始根據我的csv格式撰寫建立 object 以及 relation 的顯示邏輯,這部分花了我大概3~4小時才搞定。(不先看官方文件,只想看範例code硬幹的後果www)
註:更詳細的Neo4j Cypher指令可參考 官方文件
若是是在Sandbox下要import csv,可參考 Importing CSV Files: Neo4j Desktop and Sandbox ,其中有包含對於技術新手蠻友善的Google Drive或是Dropbox上檔案import的方式。
D・官方Sandbox搭配Neovis.js
調整到local端可以完美地跑出我要的圖形之後,接下來要研究的是:該怎麼讓組織內的其他人也可以access到我這張圖?
雖然Neo4j本身有提供匯出png, svg的功能,但單純export出來的圖上少了很多在網站上mouseover時會呈現的 properties 資訊,我想要讓其他人看到的也是動態的圖像。
後來我找到這篇文章 Graph Visualization With Neo4j Using Neovis.js 可以將Neoj4的圖案用Neovis.js展現出來,這樣就可以把js丟到server上、設定domain,讓其他人可以透過網址看到最後呈現的圖了。
不過可惜的是:這個Neovis.js的圖示並非和你在local端看到的圖案是一樣的。我覺得呈現出來的圖案沒有那麼漂亮,還需要再去調整一些參數才會長得美一點(不過也只能盡量調,沒辦法完全變得和Neo4j一模一樣)。
實作感想
因為組織資料保護的關係不能將資料公開到一般網路平台上,又組織無法在研究階段提供技術支援(組織內開Server),因此僅能以現有手上能夠處理的方式先做出來Demo給內部看。
這次實作其測試資料是放在Google Drive(開view權限),由程式利用import的方式拿到後,將資料圖像化呈現在網頁上,並讓人透過url可以access到圖像。因此對於前面提出的三點需求,最終還是只有達到前兩點而已。
(O) 1.將系統間的關聯資訊圖像化
(O) 2.讓圖像能夠呈現在網頁上讓組織內所有人access
(X) 3.資料不能外流
