neo4jd3.js

使用D3.js的Neo4j圖形可視化。

特徵

• 與Neo4j數據格式和D3.js數據格式兼容。
• 力模擬。
• 信息面板，顯示有關懸停的節點和關係信息。
• 雙擊回調。
• 自定義節點顏色（按節點類型）。
• 文本節點+ 真棒字體圖標節點+ SVG圖像節點（例如，使用Twitter Emoji）。
• 粘滯節點（拖動以粘住，單擊以鬆開）。
• 動態圖更新（例如，雙擊一個節點以將其展開）。
• 突出顯示init上的節點。
• 關係自動定向。
• 縮放，平移，自動調整。
• 與D3.js v4兼容。

安裝

> gem install sass
 > git clone github.com/eisman/neo4jd3.git
 > npm install 

 > gulp

localhost:8080在您喜歡的瀏覽器中打開。

D3.js data format

{
 "nodes": [
 {
 "id": "1",
 "labels": ["User"],
 "properties": {
 "userId": "eisman"
 }
 },
 {
 "id": "8",
 "labels": ["Project"],
 "properties": {
 "name": "neo4jd3",
 "title": "neo4jd3.js",
 "description": "Neo4j graph visualization using D3.js.",
 "url": "eisman.github.io/neo4jd3"
 }
 }
 ],
 "relationships": [
 {
 "id": "7",
 "type": "DEVELOPES",
 "startNode": "1",
 "endNode": "8",
 "properties": {
 "from": 1470002400000
 },
 "source": "1",
 "target": "8",
 "linknum": 1
 }
 ]
}

Neo4j data format

{
 "results": [
 {
 "columns": ["user", "entity"], 

 "data": [
 {
 "graph": {
 "nodes": [
 {
 "id": "1",
 "labels": ["User"],
 "properties": {
 "userId": "eisman"
 }
 },
 {
 "id": "8",
 "labels": ["Project"],
 "properties": {
 "name": "neo4jd3",
 "title": "neo4jd3.js",
 "description": "Neo4j graph visualization using D3.js.",
 "url": "eisman.github.io/neo4jd3"
 }
 }
 ],
 "relationships": [
 {
 "id": "7",
 "type": "DEVELOPES",
 "startNode": "1",
 "endNode": "8",
 "properties": {
 "from": 1470002400000
 }
 }
 ]
 }
 }
 ]
 }
 ],
 "errors": []
}

更多使用方法可以查看官方文檔

開源地址：

github.com/eisman/neo4jd3

更多更優質的資訊，請關注我，你的支持會鼓勵我不斷分享更多更好的優質文章。

閱讀更多 星集 的文章

關鍵字: 可視化技術 節點 Git