java neo4j d3.js_neo4jd3.js – 基于 D3.js 的 Neo4j 图谱可视化

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

更多更优质的资讯，请关注我，你的支持会激励我不停分享更多更好的优质文章。