如何在网页前端里可视化你的知识图谱

最新推荐文章于 2025-06-15 21:24:59 发布

游离态GLZ不可能是金融技术宅

最新推荐文章于 2025-06-15 21:24:59 发布

阅读量1.3w

点赞数 13

CC 4.0 BY-SA版权

分类专栏：知识图谱文章标签：知识图谱 javascript

本文链接：https://blog.csdn.net/qq_37477357/article/details/104857495

如何在网页前端里可视化你的知识图谱

最近费尽千辛万苦构造了一份可以用（大概）的知识图谱，并且把要利用知识图谱做的领域命名实体识别和一些推荐的功能做成Web版的demo，顺带想实现一些可视化知识图谱的功能。

（凭啥知识图谱就只能在Neo4j里自嗨，不能来前端show一下，歧视吗(￢_￢)）

找了做前端图表展示的开源库，D3.js和Echarts都能做，我拿Echarts实现了一下功能，先看一下在现在项目里一个基于知识图谱查询的实际效果：
项目中的知识图谱查询
接下里看看如何的实现：

首先在本地下载Echarts相关的js文件，在线引用也可以，html文件里如下引用：

    <script src="/static/js/echarts.common.min.js"></script>   
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/dist/echarts.min.js"></script>

给要展示的图准备一个Dom：

<!-- 为ECharts准备一个具备大小的Dom -->
    <div class = "col-md-12">
        <div class="panel panel-default ">
	        <header class="panel-heading">
	            关系图 :
	        </header>
            <div class = "panel-body ">
                <div id="graph" style="width