如何解决在 Cytoscape.js 中结合外部和内部样式定义？ [叶节点样式]
如何在 Cytoscape.js 中混合外部和内部样式定义？
给定附加代码：
理想情况下，我想为从 Cytoscape 导出的样式表中的节点设置样式，但还要为 HTML 文件中的（此处：叶）节点添加其他样式。
左：外部样式（叶节点样式 - 包含在此处，但仍被忽略）。
右：在 HTML 文件中设置样式的叶节点（但是，完全覆盖外部样式表）。
解决方法：在这里，我手动将外部样式表中的样式添加到 HTML 文件中。没什么大不了的;但是，我很好奇我是否可以同时指定外部和内部样式定义。
//style: fetch('ontology2-styles.json').then(res => res.json()).then(json => json.style),style: fetch('https://gist.githubusercontent.com/victoriastuart/429910f6d720175de635765fa2b059c1/raw/afb0902f5bc4968fe80a8fa63e593ffc2eb8c8f1/ontology2-styles.json').then(res => res.json()).then(json => json.style),/*
style: [{
selector: ".leaf",style: {
"background-color": "rgb(255,153,255)"
}
}],*/
// ...
cy.nodes().leaves().addClass("leaf");
本体.html
<!DOCTYPE html>
<html lang="en-US">
<head>
<Meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<style>
#cy {
width: 100%;
height: 100%;
position: absolute;
top: 0px;
left: 0px;
}
</style>
<script src='https://cdnjs.cloudflare.com/ajax/libs/cytoscape/3.18.2/cytoscape.min.js'></script>
</head>
<body>
<div id="cy"></div>
<script>
//fetch('ontology2.cyjs').then(res => res.json())
fetch('https://gist.githubusercontent.com/victoriastuart/d5fda63074ddead551645d9d4616347e/raw/9f29c7eecd7c470404250126d28eba7ad21ac42d/ontology2.cyjs').then(res => res.json())
.then(d => {
setup(d);
})
.catch(function(error) {
console.log('Error: Failed promise')
if (error) throw error;
});
function setup(myData) {
var cy = cytoscape({
container: document.getElementById('cy'),elements: myData.elements,//style: fetch('ontology2-styles.json').then(res => res.json()).then(json => json.style),// https://stackoverflow.com/questions/62608477/different-behavIoUr-for-leaf-nodes-cytoscape
/*
style: [{
selector: ".leaf",style: {
"background-color": "rgb(255,255)"
}
}],*/
layout: {
name: 'preset',// preset,grid,circle,...
zoom: 1.2,pan: { x: 450,y: 350 },rows: 1
},}); // end: cytoscape({...}
// https://stackoverflow.com/questions/62608477/different-behavIoUr-for-leaf-nodes-cytoscape
cy.nodes().leaves().addClass("leaf");
}; // end: function setup(data) {...}
</script>
</body>
</html>
ontology2.json [样式，从 Cysoscape 导出]
{
"format_version" : "1.0","generated_by" : "cytoscape-3.8.2","target_cytoscapejs_version" : "~2.1","title" : "default","style" : [ {
"selector" : "node","css" : {
"font-family" : "Arial","font-weight" : "normal","font-size" : 12,"background-color" : "rgb(204,255,255)","shape" : "ellipse","text-valign" : "center","text-halign" : "center","border-width" : 1.5,"border-opacity" : 1.0,"text-opacity" : 1.0,"background-opacity" : 1.0,"color" : "rgb(0,0)","width" : 75.0,"border-color" : "rgb(0,"height" : 35.0,"content" : "data(name)"
}
},{
"selector" : "node:selected","css" : {
"background-color" : "rgb(255,0)"
}
},{
"selector" : ".leaf","css" : {
"background-color": "rgb(255,255)"
}
},{
"selector" : "edge","css" : {
"line-style" : "solid","source-arrow-shape" : "none","target-arrow-color" : "rgb(0,"source-arrow-color" : "rgb(0,"opacity" : 1.0,"font-family" : "Dialog.plain","width" : 2.0,"line-color" : "rgb(132,132,132)","target-arrow-shape" : "triangle","content" : "data(pathway)"
}
},{
"selector" : "edge[pathway = 1]","css" : {
"color" : "rgb(204,{
"selector" : "edge[pathway = 2]","css" : {
"color" : "rgb(51,102,{
"selector" : "edge:selected","css" : {
"line-color" : "rgb(255,0)"
}
} ]
}
ontology2.cyjs [从 Cytoscape 导出的网络数据]
{
"format_version" : "1.0","data" : {
"shared_name" : "ontology2.csv","name" : "ontology2.csv","SUID" : 444,"__Annotations" : [ ],"selected" : true
},"elements" : {
"nodes" : [ {
"data" : {
"id" : "463","shared_name" : "Automobile","name" : "Automobile","SUID" : 463,"selected" : false
},"position" : {
"x" : 150.53420747259224,"y" : -41.58448543178383
},"selected" : false
},{
"data" : {
"id" : "461","shared_name" : "Transportation","name" : "Transportation","SUID" : 461,"position" : {
"x" : 33.53810160611465,"y" : -39.10625074741256
},{
"data" : {
"id" : "459","shared_name" : "Energy","name" : "Energy","SUID" : 459,"position" : {
"x" : 36.334975690704596,"y" : 21.610630023940757
},{
"data" : {
"id" : "457","shared_name" : "Computing","name" : "Computing","SUID" : 457,"position" : {
"x" : 39.13184977522178,"y" : 82.32751079529407
},{
"data" : {
"id" : "455","shared_name" : "Technology","name" : "Technology","SUID" : 455,"position" : {
"x" : -108.63756577690947,"y" : 22.569512158515863
},{
"data" : {
"id" : "454","shared_name" : "Root","name" : "Root","SUID" : 454,"position" : {
"x" : -231.88178370449896,"y" : 23.225589408481028
},"selected" : false
} ],"edges" : [ {
"data" : {
"id" : "464","source" : "461","target" : "463","shared_name" : "Transportation (interacts with) Automobile","shared_interaction" : "interacts with","name" : "Transportation (interacts with) Automobile","interaction" : "interacts with","SUID" : 464,"BEND_MAP_ID" : 464,{
"data" : {
"id" : "462","source" : "455","target" : "461","shared_name" : "Technology (interacts with) Transportation","name" : "Technology (interacts with) Transportation","SUID" : 462,"BEND_MAP_ID" : 462,{
"data" : {
"id" : "460","target" : "459","shared_name" : "Technology (interacts with) Energy","name" : "Technology (interacts with) Energy","SUID" : 460,"BEND_MAP_ID" : 460,{
"data" : {
"id" : "458","target" : "457","shared_name" : "Technology (interacts with) Computing","name" : "Technology (interacts with) Computing","SUID" : 458,"BEND_MAP_ID" : 458,{
"data" : {
"id" : "456","source" : "454","target" : "455","shared_name" : "Root (interacts with) Technology","name" : "Root (interacts with) Technology","SUID" : 456,"BEND_MAP_ID" : 456,"selected" : false
} ]
}
}
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
