Biojs.Cytoscape showcase
PLEASE NOTE: the above example is being affected by the CSS rules of this site. Click on 'view in window' to see the component by using its own CSS stylesheet(s) only.
View in windowOverview
Cytoscape Wrapper
A Wrapper for cytoscape.js (cytoscape web 2)
For more information go to http://cytoscape.github.com/cytoscape.js/
Version
1.0.1_beta.
To get the above Biojs.Cytoscape to work on your page, you need to do the following:
- Include the file Biojs.Cytoscape.js and its dependencies to your page header.
Biojs scripts
<script language="JavaScript" type="text/javascript" src="src/Biojs.js">
External script(s)
<script language="JavaScript" type="text/javascript" src="../biojs/dependencies/jquery/jquery-1.7.2.min.js">
- Create a div tag which holds an unique identifier.
<body> ... <div id="YourOwnDivId" /> ... </body> - Create a code snippet within a <script> tag and instance Biojs.Cytoscape into.
window.onload = function() { var instance = new Biojs.Cytoscape({ target: "YourOwnDivId" }); };
Required Parameters
-
| {Object}
properties
{ target: <target>, elements: {<elements>}, layout: {<layout>}, style: {<style>} }Where:- target identifier of the DIV tag where the component should be displayed.
- elements is an Object that contains the graph nodes and edges
- layout is an Object that defines the graph layout.
- style is an Object that defines the style of the different graph elements.
Optional Parameters
add
Add elements to the graph.
Parameters:
-
{Object} options
Example :
instance.add([ { group: "nodes", data: { id: "n0" }},{ group: "nodes", data: { id: "n1" }},{ group: "edges", data: { id: "e0", source: "n0", target: "n1" }}]);
backgroundBind
Bind to an event that happens specifically on the background of the graph.
Parameters:
-
{Object} options
Example :
instance.backgroundBind("click", function(){alert("clicked on cytoweb")});
backgroundOne
Add a callback function to be called one time when an event first occurs on the background of the graph.
Parameters:
-
{Object} options
Example :
instance.backgroundOne("click", function(){alert("clicked on cytoweb")});
backgroundTrigger
Trigger an event that happens specifically on the background of the graph.
Parameters:
-
{Object} options
Example :
instance.backgroundTrigger("click");
backgroundUnbind
Remove a previous binding to an event that happens specifically on the background of the graph.
Parameters:
-
{Object} options
Example :
instance.backgroundUnbind("click", function(){alert("clicked on cytoweb")});
bind
Bind to an event that happens anywhere in the graph.
Parameters:
-
{Object} options
Example :
instance.bind("click", function(){alert("clicked on cytoweb")});
center
Centre the graph on an element or a collection.
Parameters:
-
{Object} collection
Example :
instance.center(instance.node("a"));
collection
Get an empty collection.
Example :
var collection = instance.collection();
edges
Get particular edges with a selector.
Parameters:
-
{Object} options
Example :
var collection = instance.edges("[source=n0]");
elements
Get particular elements (nodes and edges) with a selector.
Parameters:
-
{Object} options
Example :
var collection = instance.elements("[weight>50]");
filter
Get particular elements (nodes and edges) with a selector or a filter function.
Parameters:
-
{Object} options
Example :
var collection = instance.filter("[weight>50]");
fit
Fit the graph to an element or a collection.
Parameters:
-
{Object} collection
Example :
instance.fit(instance.node("a"));
load
Load a graph into Cytoscape Web.
Parameters:
-
{Object} options
Example :
instance.load([{ data: { id: "n1" }, group: "nodes" },{ data: { id: "n2" }, group: "nodes" },{ data: { id: "e1", source: "n1", target: "n2" }, group: "edges" }]);
nodes
Get particular nodes with a selector.
Parameters:
-
{Object} options
Example :
var collection = instance.nodes("[weight>50]");
one
Add a callback function to be called one time when an event first occurs anywhere on the graph.
Parameters:
-
{Object} options
Example :
instance.one("click", function(){alert("clicked on cytoweb")});
pan
Pan the graph to an absolute position.
Parameters:
-
{Object} renderedPosition
Example :
instance.pan({x: 100, y: 100});
panby
Pan the graph relatively from its current position.
Parameters:
-
{Object} renderedPosition
Example :
instance.panBy({x: 100, y: 100});
remove
Remove elements from the graph.
Parameters:
-
{Object} options
Example :
instance.remove(instance.nodes("#n0"));
reset
Reset the graph to the default zoom level and the default position for panning.
Example :
instance.reset();
trigger
Trigger an event on the graph.
Parameters:
-
{Object} options
Example :
instance.trigger("click");
unbind
Remove a previous binding to an event that happens anywhere in the graph.
Parameters:
-
{Object} options
Example :
instance.unbind("click", function(){alert("clicked on cytoweb")});
zoom
Adjust the zoom level of the graph.
Parameters:
-
{Object} options
Example :
instance.zoom({level: 2.0, renderedPosition: { x: 100, y: 100}});
onCytoscapeReady
Parameters:
-
{function} actionPerformed
A function which receives a Biojs.Event object as argument.
Returned data in the Biojs.Event object:
-
{Object}
cytoscape
The current cytoscape instance.
Example :
instance.onCytoscapeReady(
function( cy ) {
cy.center();
}
);