Javascript 将cytoscape图形导出为png图像：如何在cytoscape图形上放置png标记_Javascript_Cytoscape.js

Javascript 将cytoscape图形导出为png图像：如何在cytoscape图形上放置png标记

javascript

Javascript 将cytoscape图形导出为png图像：如何在cytoscape图形上放置png标记,javascript,cytoscape.js,Javascript,Cytoscape.js,我是js和cytoscape的新手。我想在服务器中显示cytoscape图形，并使用保存按钮将其保存为png。我查看了cytoscape文档，但不知道如何在cytoscape图上放置图像标签。请帮帮我。我还查看了stackoverflow和github中的早期帖子我的js脚本如下： $(function(){ // var cy = cytoscape({ container: document.getElementById('cy'), style: cytoscape.stylesheet

我是js和cytoscape的新手。我想在服务器中显示cytoscape图形，并使用保存按钮将其保存为png。我查看了cytoscape文档，但不知道如何在cytoscape图上放置图像标签。请帮帮我。我还查看了stackoverflow和github中的早期帖子

我的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>


#cy{宽度：80%；高度：80%；位置：绝对；顶部：20px；左侧：20px；}

您的代码根本不包含所需的img标记，因此只需将其添加到html或使用js/jquery添加即可：

var cy=window.cy=cytoscape({
容器：document.getElementById（'cy'），
boxSelectionEnabled:false，
自动取消选择：true，
风格：[
{
选择器：'节点'，
css:{
“内容”：“数据（id）”，
“text valign”：“center”，
“text halign”：“center”
}
},
{
选择器：'$node>node'，
css:{
“填充顶部”：“10px”，
“左填充”：“10px”，
“填充底部”：“10px”，
“右边填充”：“10px”，
“text valign”：“top”，
“text halign”：“center”，
“背景色”：“bbb”
}
},
{
选择器：'边'，
css:{
“目标箭头形状”：“三角形”
}
},
{
选择器：'：已选定'，
css:{
“背景色”：“黑色”，
“线条颜色”：“黑色”，
“目标箭头颜色”：“黑色”，
“源箭头颜色”：“黑色”
}
}
],
要素：{
节点：[
{数据：{id:'a'，父项：'b'}，位置：{x:215，y:85}，
{数据：{id:'b'}}，
{数据：{id:'c'，父项：'b'}，位置：{x:300，y:85}，
{数据：{id:'d'}，位置：{x:215，y:175}，
{数据：{id:'e'}}，
{数据：{id:'f'，父项：'e'}，位置：{x:300，y:175}
],
边缘：[
{数据：{id:'ad'，源：'a'，目标：'d'}，
{数据：{id:'eb'，源：'e'，目标：'b'}
]
},
布局：{
名称：“预设”，
填充：5
}
});
cy.ready（函数（）{
//如果要在之后创建img标记：
//$（'#右'）。前置（“
body{
字体：14px helvetica neue，helvetica，arial，无衬线；
}
#赛义德{
身高：100%；
宽度：75%；
位置：绝对位置；
左：0；
排名：0；
浮动：左；
}
#巴布亚新几内亚{
边框：1px实心#ddd；
最小宽度：3em；
最小高度：3em；
宽度：25%；
浮动：对；
}

复合节点
点击我
感谢Stephan T.的回复。它正在工作。但是，它保存了初始图形。假设用户编辑图形（如更改节点位置）并希望保存该图形。如何实现它？只需使用按钮或类似按钮，我将为您编辑答案：）谢谢Stephan！很高兴我能帮上忙嗨，请你把答案标记为，否则这个问题将不会结束，我也不会得到任何carma的回答：）我已经接受了。抱歉耽搁了。我休假了。谢谢！没问题，现在一切都清楚了？是的！谢谢@StephanT。