可视化展示——实现论文引用关系动图展示

最新推荐文章于 2025-08-20 14:21:49 发布
原创 最新推荐文章于 2025-08-20 14:21:49 发布 · 2.6k 阅读 · 3 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#python #数据可视化 #json

本文详细介绍了如何使用PyEcharts和Django在Web界面上动态展示论文引用关系图，包括解决权限问题、图片展示问题及年份与会议信息的导入，最终实现了动态图的高效展示。

实现论文引用关系动图展示

效果

实现将队友处理好的用pyecharts展示出来的论文引用之间的关系（动态图）展示到web界面上：
在这里插入图片描述
首先，到pyecharts官方文档学习怎么和django后台进行融合：

https://pyecharts.org/#/zh-cn/intro

代码：

  • 思路： 在django 的view视图中，将生成的动态图的json文件传到前端，从而从前端进行展示。

paper_detail.html文件：（添加）

 <div class="panel panel-info" id="引用inlinks ">
                    <div class="panel-heading">
                        <h2>引用inlinks </h2>
                    </div>
                    <div class="panel-body">
                        <!-- inlinks 图片展示 -->
                        <div id="graph_inlink" style="width:900px; height:500px;"></div>
                    </div>
                </div>

                <div class="panel panel-info" id="引用outlinks ">
                    <div class="panel-heading">
                        <h2>引用outlinks </h2>
                    </div>
                    <div class="panel-body">
                        <!-- outlinks 图片展示 -->
                        <div id="graph_outlink" style="width:900px; height:500px;"></div>
                    </div>
                </div>

                <div class="panel panel-info" id="GeneralTerms">
                    <div class="panel-heading">
                        <h2>GeneralTerms </h2>
                    </div>
                    <div class="panel-body">
                        <p style="font-size:20px ;font-weight:bold">{{GeneralTerms}}</p>
                    </div>
                </div>

   <script type="text/javascript">
            $(document).ready(function () {
                $("#myNav").affix({
                    offset: {
                        top: 125
                    }
                });
            });
           //outlinks 图片展示
            var outlinks_s = {{ outlinks | safe }};
            var chart_1 = echarts.init(
                document.getElementById('graph_outlink'), 'roma', { renderer: 'canvas' });
            var option_1 = outlinks_s
            chart_1.setOption(option_1);
            //inlinks 图片展示
            var inlinks_s = {{ inlinks | safe }};
            var chart_2 = echarts.init(
                document.getElementById('graph_inlink'), 'roma', { renderer: 'canvas' });
            var option_2 = inlinks_s
            chart_2.setOption(option_2);
        </script>

view.py文件：

 # 论文的引用的可视化：-----------------outlinks--------------------------------------
    # node_id 是包括该论文和其引用论文id的list
    node_name = []
    node_name = outlink.split('/')
    node_name.insert(0, str(node))
    # 构造关系图的nodes
    nodes = []
    for name in node_name:
        temp = {}
        temp['name'] = name
        temp['symbolSize'] = 20
        temp['category'] = 1
        nodes.append(temp)
    nodes[0]['category'] = 0

    # 构造关系图的links
    sname = node_name[0]
    links = []
    for i in nodes:
        links.append({"source": sname, "target": i.get("name")})

    # 构造关系图的categories
    categories = [{'name': '本论文'}, {'name': '引用论文'}]
    c = (Graph(init_opts=opts.InitOpts(theme=ThemeType.ROMA))
        .add('', nodes=nodes, links=links, categories=categories, repulsion=1500, edge_symbol=['circle', 'arrow'])
        .set_global_opts(title_opts=opts.TitleOpts(title="论文引用关系图")))
    c.render(path="choose_paper/data/graph/graph_outlink_tmp.txt")
    print(c.load_javascript())
    outlink_txt = "{"
    with open('choose_paper/data/graph/graph_outlink_tmp.txt', 'r', encoding='utf-8') as f:
         line = f.readlines()
         for i in range(15,len(line)-4):
            outlink_txt+=line[i]

    # 论文的引用的可视化：-----------------inlinks--------------------------------------
    # node_id 是包括该论文和其引用论文id的list
    node_name = []
    node_name = inlink.split('/')
    node_name.insert(0, str(node))
    # 构造关系图的nodes
    nodes = []
    for name in node_name:
        temp = {}
        temp['name'] = name
        temp['symbolSize'] = 20
        temp['category'] = 1
        nodes.append(temp)
    nodes[0]['category'] = 0

    # 构造关系图的links
    sname = node_name[0]
    links = []
    for i in nodes:
        links.append({"source": sname, "target": i.get("name")})

    # 构造关系图的categories
    categories = [{'name': '本论文'}, {'name': '引用论文'}]
    c = (Graph(init_opts=opts.InitOpts(theme=ThemeType.ROMA))
        .add('', nodes=nodes, links=links, categories=categories, repulsion=1500, edge_symbol=['circle', 'arrow'])
        .set_global_opts(title_opts=opts.TitleOpts(title="论文引用关系图")))
    c.render(path="choose_paper/data/graph/graph_inlink_tmp.txt")
    inlink_txt = "{"
    with open('choose_paper/data/graph/graph_inlink_tmp.txt', 'r', encoding='utf-8') as f:
         line = f.readlines()
         for i in range(15,len(line)-4):
            inlink_txt+=line[i]

遇到的问题：

1. 首先，想把整个渲染好的模型直接从view里面传到前端，但是报如下错误：

[Errno 13] Permission denied: ‘choose_paper/data/graph’

在这里插入图片描述
通过仔细观察，发现自己的view.py代码里面 c.render（）函数在存储路径位置的时候，没有将其最后生成的文件graph_outlink.html写出，导致错误。
修改： c.render(path="choose_paper/data/graph/graph_outlink.html")
 
 

2. 在上面 c.render（）函数之后，会在本地生成一个render.html文件，里面是pyecharts生成的html文件，最初是想把这个生成的html文件保存成png文件存储到本地，然后再在界面上显示：

第一步： 安装phantomjs
打开系统命令行，键入下列代码：

npm install -g phantomjs-prebuilt

第二步： 安装了 Nodejs 环境
下载链接：

https://nodejs.org/en/download/

第三步： 安装 pyecharts-snapshot

pip install pyecharts-snapshot

第四步： 重启计算机，render（path=“”）的输出路径和格式即可
参考：

https://blog.youkuaiyun.com/u011318077/article/details/90113206
https://blog.youkuaiyun.com/FightingBob/article/details/105874500
https://blog.youkuaiyun.com/Kyrie001/article/details/82822425/

但是这样不能动态的展示，而且图片也是错误的，用vscode打开图片后，发现里面存储的仍然是html文件的内容，所以放弃了此选项。
 
 

3. 将c.render()渲染出来的动态html文件保存在本地，以txt形式保存，并提取出其中body里面的所有内容，然后传给前端，用js将此段string写入html，但是出现的问题是，js对此种形式的string不感冒，根本不显示，猜测是js判断这个传过来的是一个html，所以不进行嵌入。
在这里插入图片描述
 
 

4. 之后又尝试在前端的JavaScript里面进行文件（渲染的html文件）内容的提取：

<script language="javascript"> 
var fso, ts, s ; 
var ForReading = 1; 

fso = new ActiveXObject("Scripting.FileSystemObject"); 
ts = fso.OpenTextFile("d:\\testfile.txt", ForReading); 
s = ts.ReadLine(); 
document.getElementById("aa").innerHTML=s; 
</script>

但是报错：
在这里插入图片描述
尝试：

  • Internet 选项 -> 安全 - > 里面按下图修改(没有效果)
    在这里插入图片描述
  • 之后搜索资料发现，ActiveXObject存在和chrome不兼容的问题，为了更好的展示，所以也放弃了此思路。

 
 

5. 最后，将c.render()渲染出来的动态html文件保存在本地，以txt形式保存，并提取出下图中用来渲染html的json形式的数据，将此数据传给前端，进行界面的展示，这个方法最后获得了成功。
在这里插入图片描述

<script type="text/javascript">
            $(document).ready(function () {
                $("#myNav").affix({
                    offset: {
                        top: 125
                    }
                });
            });
           //outlinks 图片展示
            var outlinks_s = {{ outlinks | safe }};
            var chart_1 = echarts.init(
                document.getElementById('graph_outlink'), 'roma', { renderer: 'canvas' });
            var option_1 = outlinks_s
            chart_1.setOption(option_1);
            //inlinks 图片展示
            var inlinks_s = {{ inlinks | safe }};
            var chart_2 = echarts.init(
                document.getElementById('graph_inlink'), 'roma', { renderer: 'canvas' });
            var option_2 = inlinks_s
            chart_2.setOption(option_2);
        </script>

3.加入年份和会议：
在这里插入图片描述

将队友获取的year，venues文件导入django：

1.在读取venus文件的时候出现下面的报错：
在这里插入图片描述
解决：
这类错误的原因是编码造成的，通常情况下都是utf-8编码，这需要变换一下，改成encoding="ISO-8859-1"即可：file = pd.read_csv("/input/Aliases.csv",encoding="ISO-8859-1")
参考：

https://www.cnblogs.com/zhangshitong/p/11281312.html

解决时间选择器不显示问题：

效果：
在这里插入图片描述

  <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <link href="http://www.bootcss.com/p/bootstrap-datetimepicker/bootstrap-datetimepicker/css/datetimepicker.css" rel="stylesheet">
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="http://www.bootcss.com/p/bootstrap-datetimepicker/bootstrap-datetimepicker/js/bootstrap-datetimepicker.min.js"></script>
    <script src="http://www.bootcss.com/p/bootstrap-datetimepicker/bootstrap-datetimepicker/js/locales/bootstrap-datetimepicker.zh-CN.js"></script>

出现时间选择器不显示的原因：
1.datetimepicker.js 文件导入顺序，应该在最下面导入，最起码要在jquery.js之后
2.jquery与datetimepicker不适配

上述内容详见：

https://blog.youkuaiyun.com/qq_41798302/article/details/106809173

学术工具-3分钟玩转毕业论文文献引用及文献计量可视化分析（CNKI版）
白话实验室的博客
03-30 6439
三分钟玩转毕业论文文献引用及文献计量可视化分析（CNKI版） 很多同学经常遇到插入引用文献的痛苦，各种格式，手动改起来十分痛苦，于是大家开始使用endnote，但插入时又会出现对pdf文献识别不清的问题，又需要手动修改。 现在就告诉大家如何快速的解决论文文献引用问题，同时轻松完成文献计量可视化分析！ 1. 常规检索，例如“COVID-19” 选中需要的参考文献，右下角出现已选文献。（此处为20篇）...
论文趋势分析-作者关系图谱
weixin_43822124的博客
01-20 2786
github：链接 论文趋势分析专栏:链接 论文趋势分析-作者关系图谱1数据预处理1.1数据读取1.2数据连接2统计机器学习领域的作者图谱2.1抽取机器学习领域的数据2.2绘制图谱2.3找到Machine Learning领域合作数量最多的作者2.3.1第一步生成连接图2.3.2按连接的边数进行排序2.4找到与Beygelzimer Alina'合作的作者2.5绘制与作者们与其他人合作的频率2.6绘制最大联通子图 1数据预处理 1.1数据读取 # 导入所需的package import seaborn .
【Py】使用graphviz可视化对象引用关系
MacwinWin的博客
01-20 981
在分析Python代码的性能时，我们会需要对对象的创建引用销毁全过程进行跟踪，以此来找到需要优化的地方。通常会使用graphviz工具，根据维基百科描述 graphviz是一个由AT&T实验室启动的开源工具包，用于绘制DOT语言脚本描述的图形。 我们还需要使用到Python的包objgraph，根据pypi描述 objgraph is a module that lets you visually explore Python object graphs. 安装 >>> b
科研必备｜展示论文关系网络图
qq_37379316的博客
04-15 6778
简介 四月开始啦！每个月开头都会逛一逛"统计之都"，因为每月的统计月读更新啦！ 三月的统计月读有一个内容真的让人心动，而且非常实用！推荐人是：孔令仁，网址链接为：https://www.connectedpapers.com/ 在此，小编尝试使用了这个网站，并且做了简单的教程分享给大家。 注：适合任何方向的科研人员！ 使用教程 这一个很好用的免费论文关系网络可视化网站，网址封面如下： 你可以根据输入的论文名称或 doi，甚至 arXiv 网址来构建论文的关联图，例如：我输入一篇文章的DOI，这时会自动
使用svg制作作品引用关系图
MilkLeong的博客
06-23 936
在一个老师的讲座中看到了一张用svg制作的文献引用时间差的图，后来觉得自己在做的一个课题也可以用类似的表达。 最终用svg做出来的效果图大致如下： 由于是初次接触svg，这里将实现这个效果所涉及的基本操作记在这里。 1.画一条带刻度的水平线 <line stroke-linecap="undefined" stroke-linejoin="undefined" id="svg_1" y2="300" x2="539" y1="300" x1="35" stroke-width="0.4" str
高分论文密码——AI赋能科研绘图与数据可视化
2401_89571885的博客
03-06 1260
高分论文密码——AI赋能科研绘图与数据可视化
一图胜千言”如何实现？——Nature级数据可视化与AI绘图工坊指南
最新发布
jwwkyjspt的博客
08-20 558
的全类型科研图形绘制，通过一个个高水平论文案例，从如何画图、如何标注、如何改图、如何美化、如何组合、如何排序来分解科研绘图每个步骤，并且从数据清洗、视觉表现、出版合规等维度构建核心竞争力，帮助学者将复杂科研成果转化为。面对复杂图谱、多维数据、时空动态模型的表达需求，科研绘图。（尺寸、格式、分辨率、字体、配色、高分论文案例）技术路线图的概念与应用：科研工作流程与技术路线。图表设计原则：如何通过图表表达技术流程与进展。线条：线条的粗细、样式选择及其与背景的对比。绘图的简洁性、一致性、准确性、自明性。
多传感器融合技术——基于Ubuntu Linux系统ROS平台的数据可视化
zhudj08的博客
04-16 4694
多传感器融合技术——算法相关环境1. VMware下安装Ubuntu2. ROS平台3. 数据集4. 数据可视化5.参考学习的书目及论文 博主之前就简单写了当前手上传感器融合感知项目中的视觉感知部分，现在一方面自己在进一步学习深蓝学院多传感器融合技术的课程[课程相关git材料链接]，另一方面，结合自己手上的融合感知型项目，自己就再简单写写融合感知算法相关环境的分享吧。我们服务器的操作系统是使用的Ubuntu系统，采用ROS软件平台进行融合感知算法实现，传感器的实时数据传到服务器端，再进行感知融合计算。 所以
一图胜千言-顶刊级科研绘图工坊暨AI支持下Nature级数据可视化
asyxchenchong888的博客
03-27 654
面对复杂图谱、多维数据、时空动态模型的表达需求，科研绘图已成为成果撰写中的至关重要的一个环节。本课程重点讲解AI新场景下与R语言融合的全类型科研图形绘制，通过一个个高水平论文案例，从如何画图、如何标注、如何改图、如何美化、如何组合、如何排序来分解科研绘图每个步骤，并且从数据清洗、视觉表现、出版合规等维度构建核心竞争力。3、图形的基本元素（尺寸、格式、分辨率、字体、配色、高分论文案例）1)基本统计：均值、标准差、置信区间、t检验、方差分析。5）云雨图、直方图、密度图：数据分布的不同展示方法。
AI赋能科研绘图与数据可视化高级应用
aishangyanxiu的博客
03-06 2338
面向需发表SCI/EI/中文核心论文的研究者，重点讲解基于AI大模型和R语言的全类型科研图形绘制，通过一个个高水平论文案例，从如何画图、如何标注、如何改图、如何美化、如何组合、如何排序来分解科研绘图每个步骤，并且从数据清洗、视觉表现、出版合规等维度构建核心竞争力，帮助学者将复杂科研成果转化为“审稿人友好型”学术图表，为高水平论文的发表奠定坚实的基础。的拒稿与图表质量直接相关。（1）Rbase基础绘图系统：基础图形函数（plot、lines、points等）（尺寸、格式、分辨率、字体、配色、高分论文案例）
发现一个很N且免费的html5拓扑图 关系图 生成组件
weixin_34221332的博客
03-30 1965
传送门：http://visjs.org/ demo代码 <!doctype html> <html> <head> <title>vis.js newwork Demo</title> <script src="http://cdn.bootcss.com/jquer...
html页面展示关系图,可拖拽的html5人物关系图代码
weixin_42510783的博客
06-05 2486
一款可拖拽的html5人物关系图代码，可以显示预设的人物头像、人物的关系等，可以鼠标拖拽来自由排列人物顺序，可以指定不同关系的连线样式。查看演示下载资源：33次 下载资源下载积分：20积分页面的body部分，设置好人物关系的canvas显示容器，代码如下： 页面的底部，需引入jQuery库和必要的JS文件，并设置好人物关系所有的显示内容，...
echarts关系图不同系列的圆球不同颜色尝试（html版本）
想去旅行的静静的博客
10-27 2062
1、首先弄个关系图demo（官网）代码看这里，注意：下面的代码都只有需要改动的地方，在官方的例子基础上改动 2、接下来我想要将圆球变成渐变色的，并且圆球变大，连接线变短。 option = { series: [ { type: 'graph', layout: 'force', force: { // initLayout: 'circular', // gravity: 0, // 节点受到的向中心的引力因子。该值越大节点越往中心点靠拢
毕业论文word文档排版教程(动图的方式演示，针对wps)
zxy13826134783的博客
10-24 4444
目录 1 常用快捷键 2 显示全部格式标记 3 因有手动换行符无法实现首行缩进 4 利用表格制作矩阵 5 因有英文(代码)和中文而导致空隙过大 6 设置页码和目录 xx 参考文献自动编号并更新文章中的序号 xxx 页眉的双页中填上xxx大学学位论文，页眉的单页填上章节的名称 一 常用快捷键 ctrl +enter：新增空白页 二 显示全部格式标记 三 因有手动换行符无法实现首行缩进 四 利...
java英文文献_基于文献引用关系和知识图谱的时空关系研究热点分析
weixin_39852953的博客
11-24 545
科学问题本文针对时空关系的相关研究，在文献挖掘和可视化平台的基础上，通过对近年来相关文献的数据分析和重要文献信息的解读，把握时空关系研究的发展趋势和研究热点。研究方法文章作者采用“Web of Science”数据库收录的1999-2013年期间发表的探讨时空关系相关文献，包括2263篇直接文献和这些文献引用的78139篇参考文献为基础数据。采用Histcite软件构建时空关系研究文献数...
[知识图谱实战篇] 四.HTML+D3+CSS绘制关系图谱
热门推荐
杨秀璋的专栏
02-12 1万+
前面作者讲解了很多知识图谱原理知识，包括知识图谱相关技术、Neo4j绘制关系图谱等，但仍缺少一个系统全面的实例。为了加深自己对知识图谱构建的认识，为后续创建贵州旅游知识图谱打下基础，作者深入学习了张宏伦老师的网易云课程，并结合自己的理解和技术分享了该系列专栏。前文介绍了Python3抓取电影实体知识，Seaborn可视化展示电影信息，D3可视化布局。本文着重构建知识图谱，通过D3显示已获取的节点和关系图谱。
如何生成模块中的头文件引用关系图
weixin_54516968的博客
10-24 2337
当拿到一个模块的代码，我们自然而然的想要生成了解代码中的模块调用关系。那么下面的脚本就是生成了模块之间的调用关系，图示如下：# 原理使用dot画图因此，写一个脚本生成如上的dot文件，然后调用dot命令则可生成模块中的关系图。
如何使用Python进行数据可视化
mlynb的博客
03-11 5285
如何使用Python进行数据可视化
KTH流量求解器Simson的傅里叶变换动图实现
此外，项目特别强调“动图matlab代码”，说明作者利用Matlab强大的图形处理能力，编写脚本将傅里叶变换结果动态可视化——例如绘制随时间演化的功率谱密度图、频域幅值动画、模态重构视频等，使得研究人员能够直观...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值