I am attempting to get Cytoscape.js working on a web server, and it is working perfectly for the following layouts: Random Circle Grid But unfortunately, when I attempt to run the "arbor" (force-directed) model layout, my graph solely consists of a single node with no label, rather than the five node graph that I was expecting. I have run this with the exact options that cytoscape.js reccomends by default, and any options that aren't specified should be using the arbor.js defaults. I am unsure if it is perhaps my script src that is at fault, if so, what should I be importing? I have seen several other users with very similar problems using arbor with cytoscape.js, but none of those threads had been resolved in a helpful manner.
< style>
#cy {height: 100%;width: 100%;}
< /style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://cytoscape.github.io/cytoscape.js/api/cytoscape.js-latest/cytoscape.min.js"></script>
<script src="https://raw.github.com/cytoscape/cytoscape.js/master/build/extensions/cytoscape.layout.arbor.js"></script>
<div style="height:700px;" name="cy" id="cy"></div>
< script>
options = {
name: 'arbor'
};
$('#cy').cytoscape({
layout: options,
style: cytoscape.stylesheet()
.selector('node')
.css({
'content': 'data(name)',
'shape': 'octagon',
'width': '160',
'height': '80',
'text-valign': 'top',
'text-halign': 'center',
'font-size': '40',
'color': 'black',
'text-outline-width': 2,
'text-outline-color': '#888'
})
.selector('edge')
.css({
'width': '5',
'target-arrow-shape': 'triangle',
'source-arrow-shape': 'circle'
})
.selector(':selected')
.css({
'background-color': 'black',
'line-color': 'black',
'target-arrow-color': 'black',
'source-arrow-color': 'black'
})
.selector('.faded')
.css({
'opacity': 0.25,
'text-opacity': 0
}),
elements: {
nodes: [
{ data: { id: 'LOC_OS01G10320', name: 'LOC_OS01G10320' } },
{ data: { id: 'LOC_OS02G38090', name: 'LOC_OS02G38090' } },
{ data: { id: 'LOC_OS01G16030', name: 'LOC_OS01G16030' } },
{ data: { id: 'LOC_OS03G15550', name: 'LOC_OS03G15550' } },
{ data: { id: 'LOC_OS03G49800', name: 'LOC_OS03G49800' } },
{ data: { id: 'LOC_OS01G23630', name: 'LOC_OS01G23630' } },
{ data: { id: 'LOC_OS01G32750', name: 'LOC_OS01G32750' } } ],
edges: [
{ data: { source: 'LOC_OS01G10320', target: 'LOC_OS02G38090' } },
{ data: { source: 'LOC_OS01G16030', target: 'LOC_OS03G15550' } },
{ data: { source: 'LOC_OS01G16030', target: 'LOC_OS03G49800' } },
{ data: { source: 'LOC_OS01G16030', target: 'LOC_OS03G15550' } },
{ data: { source: 'LOC_OS01G16030', target: 'LOC_OS03G49800' } },
{ data: { source: 'LOC_OS01G23630', target: 'LOC_OS01G32750' } } ]
},
ready: function(){
document.cy = this;
// giddy up...
cy.elements().unselectify();
cy.on('tap', 'node', function(e){
var node = e.cyTarget;
var neighborhood = node.neighborhood().add(node);
cy.elements().addClass('faded');
neighborhood.removeClass('faded');
});
cy.on('tap', function(e){
if( e.cyTarget === cy ){
cy.elements().removeClass('faded');
}
});
}
});
</script>
From the docs:
http://cytoscape.github.io/cytoscape.js/#core/visuals/cy.layout
NB: You must reference the version of arbor.js included with Cytoscape.js in the
<head>of your HTML document:Arbor does some automatic path finding because it uses web workers, and so it must be included this way. Therefore, you can not combine arbor.js with your other JavaScript files — as you probably would as a part of the minification of the scripts in your webapp.