Neo4j-D3-Graph项目提供了一个利用D3.js库将Neo4j数据库中的图形数据进行前端可视化的解决方案,附带完整源代码供开发者参考和二次开发。
根据从Neo4j导出的JSON数据进行D3可视化展示,请启动服务后打开index.html文件查看效果。效果图如下及说明:在搜索、鼠标进入该节点时会显示临近的关系节点;点击节点,文字将切换显示;加入了碰撞检测模型,已注释掉,取消即可与效果图相同效果。
代码使用说明:
JSON格式要求以p为键值对表示,每个p代表一个查询关系。根据如下Cypher查询语句导出的数据均可以展示:MATCH p=(n:节点类型)-[r:关系类型]->() RETURN p limit 20
配置自己的数据时,在[index.html]标签中定位并修改以下几行代码即可,无需查找具体位置:
// 自定义图标及颜色(数组保证一一对应)
// names 图例名称变量制作图标
// labels 节点的标签名称(与records.json中的保持一致)
// colors 图例颜色