对Neo4j导出数据做知识图谱可视化 D3库实现
目录
- 一、引言
- 二、从Neo4j导出数据
-
- 1. 下载Neo4j Desktop
- 2. 准备导入
- 三、前端实现
-
- 1. 初始化D3并读取本地数据
- 2. 分离出节点和关系数据
- 3. 可视化效果展示
- 4. 个人实现代码
- 四、代码修改说明（2021.04更新）
-
- 1. 如何配置为自己的JSON数据
-
- 2. 关于JSON格式正确但展示出错的问题
- 3. 多图例颜色显示问题
- 4. 关于可视化展示
一、引言
好久没用D3库作可视化了，现在主要是用百度的echarts库，在项目中做简单的图表太方便了。但像是做关系图其实用echarts也很方便，这次用D3实现主要是复习一下以前做的东西，顺便记录一下。
以下是我参考到的实例代码：
- D3官方图实例参考
- Echarts做关系图实例参考
二、从Neo4j导出数据
1. 下载Neo4j Desktop
官方下载链接：https://neo4j.com/download/
注意下载后会跳转到Activation Key页面，这时已经自动生成好密钥，复制后，粘贴到 Neo4j Desktop 的 Software Keys 输入框内即可完成激活：
2. 准备导入
我们先通过Cypher查询将数据从Neo4j中查询出来，Neo4j构建和查询可以参考我上篇博客 基于Neo4j的外贸企业关系图谱做企业相似度查询
由于原Cypher语句比较长，通过下面的查询导出的格式也是一样的，根据自己的关系查询进行修改即可：
MATCH p=(n:Enterprise)-[]->() RETURN p limit 20
查询后的结果如下，点击右上角下载图标，导出为JSON格式：
导出后，可以进入JSON在线解析，查看导出的JSON格式：
三、前端实现
1. 初始化D3并读取本地数据
新建好一个Web项目后，先把D3的JS库导入进来，再通过d3.json()来读取我们的json文件。
可以通过本地方式导入
<!-- 增加D3元素库 -->
<script src="js/d3.v4.min.js"></script>
如果不想下到本地，也可以通过CDN方式直接导入
<!-- 增加D3元素库 -->
<script src="https://cdn.bootcdn.net/ajax/libs/d3/4.9.1/d3.min.js"></script>
导入D3后，就可以通过d3.json方法读取本地的json文件：
var graph;
//d3.json获取数据
d3.json("data/records.json", function(error, data) {
if(error) throw error;
graph = data;
console.log(graph[0].p);
}
先运行结果，查看控制台打印的结果如下：
`
2. 分离出节点和关系数据
还是先去D3官方图实例参考分析一下标准数据格式，从下图可以看到 data 分为 nodes 和 links 两部分，因为在D3中节点和关系是分开渲染的，渲染过后会自动在各个部分内生成位置坐标的属性。
此时我们需要将neo4j导出的数据做标准化，使数据格式符合D3标准。
（需要注意一个坑：要对json数据做去重处理，不然D3在渲染时无法将节点关系弄出来，原理其实就是节点的唯一标识产生了冲突，我们要保证节点的唯一性）
以下是标准化的代码，将json数据分离到 nodes 和 links 两部分，为数据绑定打好基础：(2021.04更新，解决长路径报错问题)
// 图数据
var graph;
let nodes =[];
let links = []; // 存放节点和关系
let nodeSet = []; // 存放去重后nodes的id
//d3.json获取数据
d3.json(url, function(error, data) {
if (error) throw error
graph = data
console.log(graph[0].p)
for (let item of graph) {
for (let segment of item.p.segments) {
// 重新更改data格式
if (nodeSet.indexOf(segment.start.identity) == -1) {
nodeSet.push(segment.start.identity)
nodes.push({
id: segment.start.identity,
label: segment.start.labels[0],
properties: segment.start.properties
})
}
if (nodeSet.indexOf(segment.end.identity) == -1) {
nodeSet.push(segment.end.identity)
nodes.push({
id: segment.end.identity,
label: segment.end.labels[0],
properties: segment.end.properties
})
}
links.push({
source: segment.relationship.start,
target: segment.relationship.end,
type: segment.relationship.type,
properties: segment.relationship.properties
})
}
}
// 省略D3初始化代码...
}
3. 可视化效果展示
数据处理好之后，只需要把数据绑定到D3上即可，至于展示部分官网参考代码已经有了，在此不再做详细展开，后面也可以参考我的代码注释理解。
最终展示出的效果如下：
从二图中可以看到可视化还做了一些事件处理，目前完成了拖拽事件、鼠标进入、鼠标离开三个事件。当鼠标放到节点上时，在右边会展示节点信息，并隐藏与该节点无关的其他节点。
最后，加了个节点文字切换和搜索功能，之前的节点全挨在一起，于是又加了个碰撞检测模型，最终效果如下：
像这种力导向关系图可以结合多个力学模型自行扩充，其他的效果可以自行拓展：（官方参考的力模型）
- Centering(向心力)
- Collision(碰撞检测)
- Links(弹簧力)
- Many-Body(电荷力)
- Positioning(定位力)
4. 个人实现代码
个人实现代码（仅供参考）：
- Github地址：https://github.com/CoderWanp/neo4j-d3-graph
- CSDN下载：https://download.csdn.net/download/tiandao451/16389982
- 直接看Demo展示效果：https://coderwanp.github.io/neo4j-d3-graph/
四、代码修改说明（2021.04更新）
1. 如何配置为自己的JSON数据
在