对Neo4j导出数据做知识图谱可视化 D3库实现

最新推荐文章于 2023-06-30 11:12:40 发布

置顶

Peng711

最新推荐文章于 2023-06-30 11:12:40 发布

阅读量2.7w

点赞数 53

CC 4.0 BY-SA版权

分类专栏：前端可视化 Neo4j 文章标签：可视化 neo4j 知识图谱 d3.js d3.min.js 前端

本文介绍了如何从Neo4j导出数据并使用D3.js库进行知识图谱的前端可视化。文章详细阐述了数据导出、D3的初始化、数据标准化、可视化展示的步骤，并提供了个人实现的代码示例和修改说明。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、引言

好久没用D3库作可视化了，现在主要是用百度的echarts库，在项目中做简单的图表太方便了。但像是做关系图其实用echarts也很方便，这次用D3实现主要是复习一下以前做的东西，顺便记录一下。

以下是我参考到的实例代码：

注意下载后会跳转到Activation Key页面，这时已经自动生成好密钥，复制后，粘贴到 Neo4j Desktop 的 Software Keys 输入框内即可完成激活：

在这里插入图片描述

我们先通过Cypher查询将数据从Neo4j中查询出来，Neo4j构建和查询可以参考我上篇博客基于Neo4j的外贸企业关系图谱做企业相似度查询

由于原Cypher语句比较长，通过下面的查询导出的格式也是一样的，根据自己的关系查询进行修改即可：

MATCH p=(n:Enterprise)-[]->() RETURN p limit 20

查询后的结果如下，点击右上角下载图标，导出为JSON格式：

在这里插入图片描述
导出后，可以进入JSON在线解析，查看导出的JSON格式：

新建好一个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

200万优质内容无限畅学