Skip to content

Instantly share code, notes, and snippets.

@maxkfranz

maxkfranz/index.html

Last active October 27, 2015 15:24
Show Gist options
  • Save maxkfranz/18504640d9a03c178fff to your computer and use it in GitHub Desktop.
Save maxkfranz/18504640d9a03c178fff to your computer and use it in GitHub Desktop.
Download ZIP
edge types
Raw
index.html
<!DOCTYPE>
<html>
<head>
<title>Edge types demo</title>
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1">
<script src="http://cytoscape.github.io/cytoscape.js/api/cytoscape.js-latest/cytoscape.min.js"></script>
<!-- for testing with local version of cytoscape.js -->
<!--<script src="../cytoscape.js/build/cytoscape.js"></script>-->
<style>
body {
font-family: helvetica, sans-serif;
font-size: 14px;
}
#cy {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
z-index: 999;
}
h1 {
opacity: 0.5;
font-size: 1em;
}
</style>
<script>
document.addEventListener('DOMContentLoaded', function(){
var cy = window.cy = cytoscape({
container: document.getElementById('cy'),
boxSelectionEnabled: false,
autounselectify: true,
layout: {
name: 'grid',
cols: 4,
sort: function( a, b ){
if( a.id() < b.id() ){
return -1;
} else if( a.id() > b.id() ){
return 1;
} else {
return 0;
}
}
},
style: [
{
selector: 'node',
style: {
'height': 40,
'width': 40,
'background-color': '#333',
'label': 'data(type)',
'text-valign': 'center',
'text-halign': 'left'
}
},
{
selector: 'edge',
style: {
'width': 3,
'opacity': 0.666,
'line-color': '#888'
}
},
{
selector: 'edge.bezier',
style: {
'curve-style': 'bezier',
'control-point-step-size': 40
}
},
{
selector: 'edge.unbundled-bezier',
style: {
'curve-style': 'unbundled-bezier',
'control-point-distances': 120,
'control-point-weights': 0.1
}
},
{
selector: 'edge.multi-unbundled-bezier',
style: {
'curve-style': 'unbundled-bezier',
'control-point-distances': '40 -40',
'control-point-weights': '0.25 0.75'
}
},
{
selector: 'edge.haystack',
style: {
'curve-style': 'haystack',
'haystack-radius': 0.5
}
},
{
selector: 'edge.segments',
style: {
'curve-style': 'segments',
'segment-distances': '40 -40',
'segment-weights': '0.25 0.75'
}
}
],
elements: [
{ data: { id: 'n01', type: 'bezier' } },
{ data: { id: 'n02' } },
{ data: { id: 'e01', source: 'n01', target: 'n02' }, classes: 'bezier' },
{ data: { id: 'e02', source: 'n01', target: 'n02' }, classes: 'bezier' },
{ data: { id: 'e03', source: 'n02', target: 'n01' }, classes: 'bezier' },
{ data: { id: 'n03', type: 'unbundled-bezier' } },
{ data: { id: 'n04' } },
{ data: { id: 'e04', source: 'n03', target: 'n04' }, classes: 'unbundled-bezier' },
{ data: { id: 'n05', type: 'unbundled-bezier (multiple)' } },
{ data: { id: 'n06' } },
{ data: { id: 'e05', source: 'n05', target: 'n06' }, classes: 'multi-unbundled-bezier' },
{ data: { id: 'n07', type: 'haystack' } },
{ data: { id: 'n08' } },
{ data: { id: 'e06', source: 'n08', target: 'n07' }, classes: 'haystack' },
{ data: { id: 'e07', source: 'n08', target: 'n07' }, classes: 'haystack' },
{ data: { id: 'e08', source: 'n08', target: 'n07' }, classes: 'haystack' },
{ data: { id: 'e09', source: 'n08', target: 'n07' }, classes: 'haystack' },
{ data: { id: 'n09', type: 'segments' } },
{ data: { id: 'n10' } },
{ data: { id: 'e10', source: 'n09', target: 'n10' }, classes: 'segments' },
]
});
});
</script>
</head>
<body>
<h1>Edge types demo</h1>
<div id="cy"></div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment