'How do I access 'cy.load()' etc from outside function?
I'm very new to both JavaScript and the cytoscape.js library. I have been playing around with the example code but I am stuck with something basic.
Essentially, what I want to be able to do is setup my basic options and style, and then be able to load my nodes and edges from a JSON structure returned by my server. I know I can use cy.load from within the 'ready' function as I am below:
$(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);
});
but I'd like to know if there is a way to have everything else setup on document ready and then later on, say on a button click access cy.load?
For example:
<script>
$("#button").click( function()
{
cy.load(<data returned from server>)
}
</script>
Here is the HTML code. Essentially Cytoscape draws the graphs within this DIV:
<body>
<div id="cy"></div>
</body>
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|
