如何将样式/ CSS数据从外部JSON文件导入Cytoscape.js？
[英]How to Import Style/CSS Data from an External JSON File into Cytoscape.js?
问题描述
我有一个在桌面Cytoscape应用程序中可视化的网络，该网络数据以.cyjs文件格式导出（尽管后缀为JSON文件），而样式数据（这些数据的格式设置）也以.cyjs文件格式导出.json文件。
我可以将theoe数据加载到在本地网络服务器上运行的Cytoscape.js中-手动将样式数据添加到HTML文件中。 但是，我不知道如何直接从style.json文件中加载那些样式数据。
更新：感谢@ jaromanda-x和@maxkfranz在下面提供的非常友好的解决方案，我在下面发布了答案（在我的同伴研究博客文章Cytoscape.js样式：外部JSON数据文件中进行了详细描述）。
cytoscape_js.html
<HTML xmlns="http://www.w3.org/1999/xhtml" lang="en-us">
<HEAD>
<meta charset="utf-8" />
<style>
#cy {
width: 80%;
height: 80%;
position: absolute;
}
</style>
<script src='https://cdnjs.cloudflare.com/ajax/libs/cytoscape/3.9.0/cytoscape.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.js'></script>
</HEAD>
<BODY>
<div id='cy'></div>
<script>
var json = $.getJSON("data.json")
.done(function(data){
var cy = cytoscape({
container: document.getElementById('cy'),
elements: data.elements,
style : [ {
"selector" : "node",
"css" : {
"text-valign" : "center",
"text-halign" : "center",
"font-family" : "SansSerif.plain",
"font-weight" : "normal",
"background-color" : "rgb(204,255,255)",
"border-width" : 1.5,
"height" : 35.0,
"width" : 75.0,
"border-opacity" : 1.0,
"color" : "rgb(0,0,0)",
"border-color" : "rgb(0,153,255)",
"text-opacity" : 1.0,
"background-opacity" : 1.0,
"font-size" : 12,
"shape" : "ellipse",
"content" : "data(src_node)"
}
}, {
"selector" : "node:selected",
"css" : {
"background-color" : "rgb(255,255,0)"
}
}, {
"selector" : "edge",
"css" : {
"color" : "rgb(0,0,0)",
"source-arrow-shape" : "none",
"font-family" : "Dialog.plain",
"font-weight" : "normal",
"target-arrow-color" : "rgb(0,0,0)",
"width" : 2.0,
"source-arrow-color" : "rgb(0,0,0)",
"line-color" : "rgb(132,132,132)",
'opacity': 0.5,
"line-style" : "solid",
"font-size" : 12,
"text-opacity" : 1.0,
"target-arrow-shape" : "triangle",
"content" : "data(pathway)",
'curve-style': 'bezier'
}
} ],
});
});
</script>
</BODY>
</HTML>
data.json
{
"elements" : {
"nodes" : [ {
"data" : {
"id" : "163",
"shared_name" : "c00103_glycolysis",
"src_node" : "c00103",
"name" : "c00103_glycolysis",
"x" : 200,
"y" : 60,
"tgt_node" : "c00103",
"SUID" : 163,
"selected" : false
},
"position" : {
"x" : -29.497192046634154,
"y" : -1709.4156554007204
},
"selected" : false
}, {
"data" : {
"id" : "162",
"shared_name" : "5.4.2.2_glycolysis",
"src_node" : "5.4.2.2",
"name" : "5.4.2.2_glycolysis",
"x" : 200,
"y" : 70,
"tgt_node" : "5.4.2.2",
"SUID" : 162,
"selected" : false
},
"position" : {
"x" : -29.497192046634154,
"y" : -1579.4552719836647
},
"selected" : false
}, {
"data" : {
"id" : "161",
"shared_name" : "c00668_glycolysis",
"src_node" : "c00668",
"name" : "c00668_glycolysis",
"x" : 200,
"y" : 80,
"tgt_node" : "c00668",
"SUID" : 161,
"selected" : false
},
"position" : {
"x" : -29.497192046634154,
"y" : -1449.494888566609
},
"selected" : false
} ],
"edges" : [ {
"data" : {
"id" : "361",
"source" : "163",
"target" : "162",
"shared_name" : "c00103_glycolysis () 5.4.2.2_glycolysis",
"vis" : "vis",
"shared_interaction" : "",
"name" : "c00103_glycolysis () 5.4.2.2_glycolysis",
"interaction" : "",
"pathway" : 1,
"SUID" : 361,
"wt" : "wt",
"BEND_MAP_ID" : 74,
"selected" : false
},
"selected" : false
}, {
"data" : {
"id" : "360",
"source" : "162",
"target" : "161",
"shared_name" : "5.4.2.2_glycolysis () c00668_glycolysis",
"vis" : "vis",
"shared_interaction" : "",
"name" : "5.4.2.2_glycolysis () c00668_glycolysis",
"interaction" : "",
"pathway" : 1,
"SUID" : 360,
"wt" : "wt",
"BEND_MAP_ID" : 76,
"selected" : false
},
"selected" : false
}, {
"data" : {
"id" : "359",
"source" : "162",
"target" : "163",
"shared_name" : "5.4.2.2_glycolysis () c00103_glycolysis",
"vis" : "vis",
"shared_interaction" : "",
"name" : "5.4.2.2_glycolysis () c00103_glycolysis",
"interaction" : "",
"pathway" : 1,
"SUID" : 359,
"wt" : "wt",
"BEND_MAP_ID" : 77,
"selected" : false
},
"selected" : false
}, {
"data" : {
"id" : "358",
"source" : "161",
"target" : "162",
"shared_name" : "c00668_glycolysis () 5.4.2.2_glycolysis",
"vis" : "vis",
"shared_interaction" : "",
"name" : "c00668_glycolysis () 5.4.2.2_glycolysis",
"interaction" : "",
"pathway" : 1,
"SUID" : 358,
"wt" : "wt",
"BEND_MAP_ID" : 78,
"selected" : false
},
"selected" : false
} ]
}
}
styles.json
[ {
"format_version" : "1.0",
"generated_by" : "cytoscape-3.7.1",
"target_cytoscapejs_version" : "~2.1",
"title" : "victoria_0",
"style" : [ {
"selector" : "node",
"css" : {
"text-valign" : "center",
"text-halign" : "center",
"font-family" : "SansSerif.plain",
"font-weight" : "normal",
"background-color" : "rgb(204,255,255)",
"border-width" : 1.5,
"height" : 35.0,
"width" : 75.0,
"border-opacity" : 1.0,
"color" : "rgb(0,0,0)",
"border-color" : "rgb(0,153,255)",
"text-opacity" : 1.0,
"background-opacity" : 1.0,
"font-size" : 12,
"shape" : "ellipse",
"content" : "data(src_node)"
}
}, {
"selector" : "node:selected",
"css" : {
"background-color" : "rgb(255,255,0)"
}
}, {
"selector" : "edge",
"css" : {
"color" : "rgb(0,0,0)",
"source-arrow-shape" : "none",
"font-family" : "Dialog.plain",
"font-weight" : "normal",
"target-arrow-color" : "rgb(0,0,0)",
"width" : 2.0,
"source-arrow-color" : "rgb(0,0,0)",
"line-color" : "rgb(132,132,132)",
"opacity" : 1.0,
"line-style" : "solid",
"font-size" : 12,
"text-opacity" : 1.0,
"target-arrow-shape" : "triangle",
"content" : "data(pathway)"
}
}, {
"selector" : "edge[pathway = 1]",
"css" : {
"color" : "rgb(204,0,0)"
}
}, {
"selector" : "edge[pathway = 2]",
"css" : {
"color" : "rgb(51,102,0)"
}
}, {
"selector" : "edge:selected",
"css" : {
"line-color" : "rgb(255,0,0)"
}
} ]
} ]
2 个解决方案
解决方案1
0 2019-08-20 00:31:53
请注意，可以简单地给elements和style类的字段一个elements: fetch(url1).then(res => res.json()), style: fetch(url2).then(res => res.json())值，事情会自动运行，例如elements: fetch(url1).then(res => res.json()), style: fetch(url2).then(res => res.json())
参见http://js.cytoscape.org/#init-opts/elements
为了使fetch()或$.get()正常工作，必须运行http服务器。
解决方案2
0 2019-08-21 18:05:00
OK：非常感谢@ jaromanda-x和@maxkfranz，这是解决方案。
我将在下面粘贴HTML代码，其中显示了两种解决方案/方法。 我已经上传了一个压缩文件cytoscapejs_demo.tgz [11.141 KB]，其中包含HTML文件中引用的文件，这些文件是重新创建下面的图形所必需的。
cytoscape.js.demo.html
<!DOCTYPE html>
<HTML xmlns="http://www.w3.org/1999/xhtml" lang="en-us">
<HEAD>
<meta charset="utf-8" />
<title>[Cytoscape.js] Glycolysis + TCA Cycle</title>
<style>
#cy {
width: 100%;
height: 100%;
position: absolute;
top: 110px;
left: 0px;
bottom: 0px;
left: 0px;
}
</style>
<script src='https://cdnjs.cloudflare.com/ajax/libs/cytoscape/3.9.0/cytoscape.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.js'></script>
</HEAD>
<BODY>
<div id='cy'></div>
<script>
// ==========================================================================
// APPROACH #1:
Promise.all([
fetch('relations2-glycolysis+tca.tsv.cyjs').then(res => res.json()),
fetch('styles.json').then(res => res.json())
]).then(([{elements}, [{style}]]) => {
cytoscape({
container: document.getElementById('cy'),
elements,
style,
// END, APPROACH #1-SPECIFIC CODE
// Note that we need, here, the (non-edited) Cytoscape-exported "styles.json" file.
// ==========================================================================
// ==========================================================================
// APPROACH #2: UNCOMMENT THIS (AND COMMENT APPROACH #1 LINES ABOVE):
// var json = $.getJSON('relations2-glycolysis+tca.tsv.cyjs')
// .done(function(data){
// var cy = cytoscape({
// container: document.getElementById('cy'),
// elements: data.elements,
// style: fetch('styles-edited.json').then(res => res.json()).then(json => json.style),
// END, APPROACH #2-SPECIFIC CODE
// Notes.
// 1. Here we need the (edited) Cytoscape-exported "styles.json" file: I
// needed to manually delete the leading "[ " at the top, and the lagging
// " ]" at the bottom of the Cytoscape-exported "styles.json" file:
// 2. This also works, but is not needed ("elements: data.elements" works):
// elements: fetch('relations2-glycolysis+tca.tsv.cyjs').then(res => res.json()).then(json => json.elements),
// ==========================================================================
// In either case, above, I added "curve-style" : "bezier" to the edge properties
// in the styles-edited.json file, to enable the display of the edges as arrows.
// ======================================================================
layout: {
name: 'preset',
zoom: 1.2,
pan: { x: 950, y: 2150 },
rows: 1
},
minZoom: 5e-1,
maxZoom: 0.25e1,
zoomingEnabled: true,
userZoomingEnabled: true,
panningEnabled: true,
userPanningEnabled: true,
boxSelectionEnabled: false,
selectionType: 'single',
touchTapThreshold: 8,
desktopTapThreshold: 4,
autolock: false,
autoungrabify: false,
autounselectify: false,
// Rendering options:
headless: false,
styleEnabled: true,
hideEdgesOnViewport: false,
hideLabelsOnViewport: false,
textureOnViewport: false,
motionBlur: false,
motionBlurOpacity: 0.2,
wheelSensitivity: 0.1,
pixelRatio: 'auto'
});
});
</script>
</BODY>
</HTML>
外部json文件调用cytoscape.js期间发生意外令牌]错误
[英]Unexpected token ] error during external json file call for cytoscape.js
通过从下拉菜单中选择，使用Cytoscape.js显示JSON文件内容
[英]Display JSON file contents with Cytoscape.js by selecting from a dropdown menu
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.