将cytoscape图导出为png图像：如何将png标签放在cytoscape图上 [英] Export cytoscape graph as png image: how to put png tag on cytoscape graph
本文介绍了将cytoscape图导出为png图像：如何将png标签放在cytoscape图上的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我是js和cytoscape的新手。我想用保存按钮在服务器中显示cytoscape图，将其另存为png。我检查了cytoscape文档，但不了解如何在cytoscape图上放置图像标签。请帮我。我检查了stackoverflow和github中的早期帖子。
I an novice in js and cytoscape. I want to display cytoscape graph in server with an save button for saving it as png. I checked cytoscape documentation but did not understand how to put an image tag on cytoscape graph. Please help me. I checked earlier posts in stackoverflow and github also.
我的js脚本在这里：
$(function(){ //
var cy = cytoscape({
container: document.getElementById('cy'),
style: cytoscape.stylesheet()
.selector('node')
.css({
'label': 'data(label)',
'width': '60px',
'height': '60px',
'color': 'blue',
'background-color': 'blue',
})
.selector('edge')
.css({
'text-background-color': 'blue',
'text-background-opacity': 0.4,
'width': '6px',
'line-color': '#3C1515'})
,elements:{
nodes:[
{ data: { id:"node1",label:" node1 " } },
{ data: { id:"node2",label:" node2 " } },
{ data: { id:"node3",label:" node3 " } }
],
edges:[
{"data": {"id": "12","source": "node1","target": "node2"}},
{"data": {"id": "13","source": "node1","target": "node3"}}
]
},
layout: { name: "circle",directed: true,padding: 10 }
}); // var cy cytoscope ends
var png64 = cy.png();
// put the png data in an img tag
$('#png-eg').attr('src', png64);
});
html代码是：
<html>
<style>
#cy {width: 80%;height: 80%;position: absolute;top: 20px;left: 20px;}
</style>
<script src="jquery.js"></script>
<script src="cytoscape.js"></script>
<script src="javascript-code.js"></script>
</head>
<body>
<div id="cy"></div>
</body>
</html>
推荐答案
您的代码根本不包含必需的img标签，因此只需将其添加到您的html或使用js / jquery进行添加：
Your code simply doesn't contain the required img tag, so just add it to your html or add it with js/jquery:
var cy = window.cy = cytoscape({
container: document.getElementById('cy'),
boxSelectionEnabled: false,
autounselectify: true,
style: [
{
selector: 'node',
css: {
'content': 'data(id)',
'text-valign': 'center',
'text-halign': 'center'
}
},
{
selector: '$node > node',
css: {
'padding-top': '10px',
'padding-left': '10px',
'padding-bottom': '10px',
'padding-right': '10px',
'text-valign': 'top',
'text-halign': 'center',
'background-color': '#bbb'
}
},
{
selector: 'edge',
css: {
'target-arrow-shape': 'triangle'
}
},
{
selector: ':selected',
css: {
'background-color': 'black',
'line-color': 'black',
'target-arrow-color': 'black',
'source-arrow-color': 'black'
}
}
],
elements: {
nodes: [
{ data: { id: 'a', parent: 'b' }, position: { x: 215, y: 85 } },
{ data: { id: 'b' } },
{ data: { id: 'c', parent: 'b' }, position: { x: 300, y: 85 } },
{ data: { id: 'd' }, position: { x: 215, y: 175 } },
{ data: { id: 'e' } },
{ data: { id: 'f', parent: 'e' }, position: { x: 300, y: 175 } }
],
edges: [
{ data: { id: 'ad', source: 'a', target: 'd' } },
{ data: { id: 'eb', source: 'e', target: 'b' } }
]
},
layout: {
name: 'preset',
padding: 5
}
});
cy.ready(function () {
//if you want to create the img tag afterwards:
//$('#right').prepend("<img id='png-eg'>");
var png64 = cy.png();
// put the png data in an img tag
$('#png-eg').attr('src', png64);
});
$("#clickMe").click(function () {
var png64 = cy.png();
// put the png data in an img tag
$('#png-eg').attr('src', png64);
});
body {
font: 14px helvetica neue, helvetica, arial, sans-serif;
}
#cy {
height: 100%;
width: 75%;
position: absolute;
left: 0;
top: 0;
float: left;
}
#png-eg {
border: 1px solid #ddd;
min-width: 3em;
min-height: 3em;
width: 25%;
float: right;
}
<!DOCTYPE html>
<!-- This code is for demonstration purposes only. You should not hotlink to Github, Rawgit, or files from the Cytoscape.js documentation in your production apps. -->
<html>
<head>
<link href="style.css" rel="stylesheet" />
<meta charset=utf-8 />
<meta name="viewport" content="user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, minimal-ui">
<title>Compound nodes</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/cytoscape/3.2.17/cytoscape.min.js"></script>
<script src="https://unpkg.com/jquery@3.3.1/dist/jquery.js"></script>
</head>
<body>
<div id="wrapper">
<div id="cy"></div>
<div id="right"><button id="clickMe" style="float: right;">Click me</button><img id="png-eg"></div>
</div>
</body>
</html>
这篇关于将cytoscape图导出为png图像：如何将png标签放在cytoscape图上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
