User:Hisa/cytoscape test: Difference between revisions
From FANTOM5_SSTAR
No edit summary |
No edit summary |
||
| Line 9: | Line 9: | ||
<div id="ont_tree" style="width:100%;height:600px" resize:both;> | <div id="ont_tree" style="width:100%;height:600px" resize:both;> | ||
Cytoscape Web will replace the contents of this div with your graph. | Cytoscape Web will replace the contents of this div with your graph. | ||
</div> | |||
<div id="info" style="width:100%;height:100px" resize:both;> | |||
<p>Click each element</p> | |||
</div> | </div> | ||
| Line 29: | Line 33: | ||
<data key="label">A</data>\ | <data key="label">A</data>\ | ||
</node>\ | </node>\ | ||
<node id="2">\ | <node id="2"><data key="label">B</data></node>\ | ||
<data key="label">B</data>\ | <edge source="2" target="1">\ | ||
</ | <data key="label">A to B</data>\ | ||
</edge>\ | |||
<node id="3">\ | <node id="3">\ | ||
<data key="label">C</data>\ | <data key="label">C</data>\ | ||
</node>\ | </node>\ | ||
<edge source="1" target="3">\ | <edge source="1" target="3">\ | ||
<data key="label"> | <data key="label">is_a</data>\ | ||
</edge>\ | </edge>\ | ||
</graph>\ | </graph>\ | ||
| Line 45: | Line 47: | ||
'; | '; | ||
// function when click | |||
// initialization options | // initialization options | ||
var options = { | var options = { | ||
| Line 54: | Line 61: | ||
var vis = new org.cytoscapeweb.Visualization("ont_tree", options); | var vis = new org.cytoscapeweb.Visualization("ont_tree", options); | ||
// callback when Cytoscape Web has finished drawing | |||
vis.ready(function() { | |||
// add a listener for when nodes and edges are clicked | |||
vis.addListener("click", "nodes", function(event) { | |||
handle_click(event); | |||
}); | |||
vis.addListener("dblclick", "nodes", function(event) { | |||
handle_dblclick(event); | |||
}); | |||
function handle_click(event) { | |||
print( "yes" ); | |||
} | |||
function handle_dblclick(event) { | |||
print( "no" ); | |||
} | |||
function clear() { | |||
document.getElementById("info").innerHTML = ""; | |||
} | |||
function print(msg) { | |||
document.getElementById("info").innerHTML += "<p>" + msg + "</p>"; | |||
} | |||
}); | |||
// draw | // draw | ||
Revision as of 17:41, 27 June 2012
Cytoscape Web will replace the contents of this div with your graph.
Click each element
