我对 JavaScript 和 cytoscape.js 库都很陌生。我一直在研究示例代码,但我仍然坚持一些基本的东西。
本质上,我想要做的是设置我的基本选项和样式,然后能够从我的服务器返回的 JSON 结构加载我的节点和边。我知道我可以在“ready”函数中使用 cy.load,如下所示:
$(loadCy = function(){
options = {
showOverlay: false,
minZoom: 0.5,
maxZoom: 2,
style: cytoscape.stylesheet()
.selector('node')
.css({
'content': 'data(name)',
'font-family': 'helvetica',
'font-size': 14,
'text-outline-width': 3,
'text-outline-color': '#888',
'text-valign': 'center',
'color': '#fff',
'width': 'mapData(weight, 30, 80, 20, 50)',
'height': 'mapData(height, 0, 200, 10, 45)',
'border-color': '#fff'
})
.selector(':selected')
.css({
'background-color': '#000',
'line-color': '#000',
'target-arrow-color': '#000',
'text-outline-color': '#000'
})
.selector('edge')
.css({
'width': 2,
'target-arrow-shape': 'triangle'
})
,
ready: function(){
cy = this;
cy.load({
nodes: [
{ data: { id: "n1" } },
{ data: { id: "n2" } }
],
edges: [
{ data: { id: "e1", source: "n1", target: "n2" } }
]
})
}
};
$('#cy').cytoscape(options);
});
但我想知道是否有一种方法可以在文档上准备好其他所有内容,然后单击按钮访问 cy.load?
例如:
<script>
$("#button").click( function()
{
cy.load(<data returned from server>)
}
</script>
这是 HTML 代码。本质上,Cytoscape 在此 DIV 中绘制图表:
<body>
<div id="cy"></div>
</body>
最佳答案
在您的示例中 var cy
未定义,因此 js 使用 id="cy"
您需要添加此内容(如 documentation 中)
$("#cy").cytoscape(options);
var cy = $("#cy").cytoscape("get");
关于javascript - 如何从外部函数访问 'cy.load()' 等?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19287415/