知识图谱可视化之cytoscape.js构建知识图谱（django框架将数据由后台传到前台进行图谱构建）

置顶带鱼工作室

已于 2023-10-07 10:50:01 修改

阅读量8.3k

点赞数 10

分类专栏： cytoscape.js django 后台数据传送到前端文章标签： cytoscape.js django 动态传送数据到前端

于 2020-04-05 13:00:17 首次发布

本文链接：https://blog.csdn.net/liaoningxinmin/article/details/105323281

版权

django 同时被 3 个专栏收录

8 篇文章 3 订阅

订阅专栏

后台数据传送到前端

2 篇文章 1 订阅

订阅专栏

cytoscape.js

1 篇文章 0 订阅

订阅专栏

1、cytoscape.js是什么

cytoscape.js是常用的构建知识图谱的工具，是一个网络图的可视化工具。通常有两种使用方式：

第一种是桌面版的Cytoscape Desktop，集成好的app供我们使用。

第二种是前端js库，通过在前端代码中引用cytoscape.js进行使用，通常cytoscape.js需要结合jquery.js进行使用。

在此使用cytoscape.js进行知识图谱的开发工作。

2、主要工作

文章主要介绍cytoscape.js的使用方法：

1）构建静态html文件进行图谱展示

2）使用Python的django框架进行开发，并将后台业务逻辑生成的数据传送到前端js中进行展示，实现动态图谱构建，满足工程实际需要。

2.1 构建静态html文件构建图谱

首先需要了解一下静态图谱是如何构建的，搞清楚构建方法及构建逻辑，同时为构建动态图谱打下基础。首先来看一段html代码

<!DOCTYPE html>
<html>
<head>
    <title>Static Cytoscape.js</title>
    <!--定义style属性，定义显示图谱的div-->
    <style type="text/css">
        #cy {
            height: 500px;
            width: 500px;
            background-color: #f9f9f9;
        }
    </style>
    <!-- 
    引用jquery.js与cytoscape.js，使用cdn链接引用（运行时需要电脑接入网络），也可使用外部文件引用（无需接入网络）
	注：jquery.min.js与cytoscape.min.js为jquery.js与cytoscape.js的压缩版，使用时均可！
    -->
    <script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
    <script src="http://cdn.bootcss.com/cytoscape/2.3.16/cytoscape.min.js"></script>
    <!--构建图谱js-->
    <script>
    	//$(function(){})就是$(document).ready(function(){})的简写，
    	//是JQuery的语法，$表示JQuery对象，页面加载后即执行此功能。
        $(function(){
        	//定义cytoscape方法显示图谱
            cytoscape({
            	//首先进行div的绑定，绑定到id为cy这个div上进行显示
              container: document.getElementById('cy'),
              //定义显示图谱的节点与边的样式
              style: [
                { selector: 'node[label = "中国科学院计算技术研究所"]', 
                //选择节点中label为中国科学院计算技术研究所的节点定义css样式
                //css样式中包括背景色与需要显示的内容，此处显示节点中的name属性
                  css: {'background-color': '#6FB1FC', 'content': 'data(name)'}
                },
                { selector: 'node[label = "school"]', 
                  css: {'background-color': '#F5A45D', 'content':'data(title)'}
                },
                { selector: 'edge', 
                //边的样式，'target-arrow-shape': 'triangle'定义箭头指向
                  css: {'content': 'data(relationship)', 'target-arrow-shape'
                  : 'triangle'}
                }        
              ],
              //图谱元素
              elements: {
              	//节点数据，节点数据中id为必填项，另外name与label为自选项
                nodes: [
                	{data: {id: '2', name:'徐志伟', label: '中国科学院计算技术研究所'}},
                    {data: {id: '5', name:'文继荣', label: '中国科学院计算技术研究所'}},
                    {data:{id:'1001',label:'school',title:'中国科学院计算技术研究所'}}
                ],
                //边数据，source与target为必选项
                edges:[
                	{data: {source: '2', target: '1001', relationship: 'belong_to'}},
            		{data: {source: '5', target: '1001', relationship: 'belong_to'}}
                ]
              },
              //布局方式，还有circle...等
              layout: { name: 'grid'} 
            });
        });
    </script>
</head>
<body>
	<!--显示图谱的div-->
    <div id="cy"></div>
</body>
</html>

html文件中注释写的比较详细了，生成图谱的整体思路是通过节点的id值进行边的构建，两个节点构造一条边，边是有方向的，source为边的起始点，target为边的终点，通过起点与终点构造一条有方向的边。

运行结果：

2.2构建动态知识图谱

动态知识图谱是指数据不是死的，而是通过传送的可变的数据。在此通过django框架进行后台数据传送，将数据传送到前端cytoscape.js中进行显示，这样后台传送什么数据，前端就可以显示什么图谱，适合在实际工程中应用。

2.2.1 django项目准备

首先创建一个django项目（我的django为2.0版本，安装时可指定 pip install django==2.0），然后使用

python manage.py startapp ZSTP

创建一个ZSTP的app，我们在此app下进行知识图谱的构建。app创建好后在settings.py中进行app的注册，如下图所示

app 的项目结构：

views.py文件中为业务逻辑代码的书写，即后台数据。

还需准备模版文件夹，如下图所示：

选中我们创建的项目，然后右键new，选择Directory，新建一个名为templates的目录，用于存储html文件，然后打开settings.py进行路径配置，如下图所示：

至此准备工作已经准备完成！

2.2.2 后台数据传送到前端展示

首先进行app中的业务逻辑的编写，打开views.py，输入

from django.shortcuts import render
import json 
# Create your views here.

def get_json_new(request):
    node = [{'data': {'id': '2', 'name':'徐志伟', 'label': '中国科学院计算技术研究所'}},\
            {'data': {'id': '5', 'name':'文继荣', 'label': '中国科学院计算技术研究所'}},\
            {'data':{'id':'1001','label':'school','title':'中国科学院计算技术研究所'}}]
    edge = [{'data': {'source': '2', 'target': '1001', 'relationship': 'belong_to'}},\
            {'data': {'source': '5', 'target': '1001', 'relationship': 'belong_to'}}]
    return render(request,'tp.html',{'node':json.dumps(node),'edge':json.dumps(edge)})

编写业务逻辑函数get_json_new，函数参数为request。接下来是图谱所需node与edge节点，此处需要注意：node与edge中字典的key与value必须全部使用引号引上，若不引上则传送到前端的数据不能转换成object对象，就无法构建图谱，这是非常重要的一点！

render函数进行模版渲染，即跳转到哪个html文件，{'node':json.dumps(node),'edge':json.dumps(edge)}为需要传送的参数，为字典格式，json.dumps()函数用于格式转换，到此后台数据准备好了，下面展示前端接收数据。

2.2.3前端接收后台数据

由上面的render函数渲染中可以看到，传送的参数为node与edge。在前端中接收后台传送的变量需要使用{{ }},例如接收node变量，则写作为 {{ node }}，下面在templates路径下创建tp.html文件，代码如下

<!DOCTYPE html>
<html>
<head>
    <title>show  Cytoscape.js</title>
    <style type="text/css">
        /* cytoscape graph */
        #cy {
            height: 500px;
            width: 500px;
            background-color: #f9f9f9;
            display: block;
        }
    </style>
    <script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
    <script src="http://cdn.bootcss.com/cytoscape/2.3.16/cytoscape.min.js"></script>
<script>
        $(function(){
            var node = {{ node|safe }};
            alert(node);
            var edge = {{ edge|safe }};
            cytoscape({
              container: document.getElementById('cy'),
              style: [
                { selector: 'node[label = "中国科学院计算技术研究所"]',
                  css: {'background-color': '#6FB1FC', 'content': 'data(name)'}
                },
                { selector: 'node[label = "school"]',
                  css: {'background-color': '#F5A45D', 'content': 'data(title)'}
                },
                { selector: 'edge',
                  css: {'content': 'data(relationship)', 'target-arrow-shape': 'triangle'}
                }
              ],
              elements: {
                nodes: node,
                edges: edge
              },
              layout: { name: 'grid'}
            });
        });
    </script>

</head>
<body>
    <div>动态传送数据</div>
    <div id="cy"></div>
<div></div>
</body>
</html>

代码中部分说明已经在2.1中进行说明，这里对未说明的地方进行说明：

1 var node = {{ node|safe }};
2 alert(node);
3 var edge = {{ edge|safe }};

第一行与第三行定义变量node与edge接收后台传送的参数，并需要添加 safe ，因为后台传送时使用json.dumps函数进行处理，所以在接收时需要进行处理。第二行我们可以弹出一下node，弹出结果如下图：

可以看到接收的数据类型为object对象类型，若为其他类型（如undefined、string）则有错误，需要到views.py文件中检查数据格式是否满足要求。

2.2.4 配置路由与前端显示

接下来需要为网页进行路由配置，打开项目下的urls.py，配置代码如下：

from django.conf.urls import url
from django.contrib import admin
from ZSTP.views import get_json_new
urlpatterns = [
    url(r'admin/', admin.site.urls),
    #tp
    url(r'get_json/',get_json_new)




]

路由配置好后需要进行项目的启动：使用python manage.py runserver 进行项目启动

然后通过http://127.0.0.1:8000/get_json/即可看到图谱展示的结果了，首先弹出对象类型，然后点击确定，可看到如下结果：

3 总结

使用动态数据构建图谱十分满足工程的需要，例如在业务逻辑中返回满足条件的数据（数据一般存储在数据库中），然后处理数据为满足传送要求的格式，在使用如上方法进行展示，即可提升交互效果，为全栈开发增添特色！

文章为作者原创，转载请注明出处！

带鱼工作室

关注

10
点赞
踩
69

收藏

觉得还不错? 一键收藏
打赏
18
评论
知识图谱可视化之cytoscape.js构建知识图谱（django框架将数据由后台传到前台进行图谱构建）

1、cytoscape.js是什么cytoscape.js是常用的构建知识图谱的工具，是一个网络图的可视化工具。通常有两种使用方式：第一种是桌面版的Cytoscape Desktop，集成好的app供我们使用。第二种是前端js库，通过在前端代码中引用cytoscape.js进行使用，通常cytoscape.js需要结合jquery.js进行使用。在此使用cytoscape.js进行...
复制链接

扫一扫