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 總結
使用動態數據構建圖譜十分滿足工程的需要，例如在業務邏輯中返回滿足條件的數據（數據一般存儲在數據庫中），然後處理數據爲滿足傳送要求的格式，在使用如上方法進行展示，即可提升交互效果，爲全棧開發增添特色！
文章爲作者原創，轉載請註明出處！