cytoscape-multilayer
Version:
The multilayer layout for DAGs and trees for Cytoscape.js
125 lines (105 loc) • 4.13 kB
HTML
<!DOCTYPE>
<html>
<!-- Non functioning -->
<head>
<title>cytoscape-multilayer.js demo</title>
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1">
<script src="https://unpkg.com/cytoscape/dist/cytoscape.min.js"></script>
<!-- for testing with local version of cytoscape.js -->
<!--<script src="../cytoscape.js/build/cytoscape.js"></script>-->
<script src="https://unpkg.com/dagre@0.7.4/dist/dagre.js"></script>
<script src="cytoscape-multilayer.js"></script>
<script src="https://unpkg.com/potpackweighted@1.0.2/index.mjs"></script>
<style>
body {
font-family: helvetica;
font-size: 14px;
}
#cy {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
z-index: 999;
}
h1 {
opacity: 0.5;
font-size: 1em;
}
</style>
<script>
window.addEventListener('DOMContentLoaded', function(){
var cy = window.cy = cytoscape({
container: document.getElementById('cy'),
boxSelectionEnabled: false,
autounselectify: true,
layout: {
name: 'multilayer', nodeXSep: '50', nodeYsep: '200'
},
style: [
{
selector: 'node',
style: {
'background-color': '#11479e'
}
},
{
selector: 'edge',
style: {
'width': 4,
'target-arrow-shape': 'triangle',
'line-color': '#9dbaea',
'target-arrow-color': '#9dbaea',
'curve-style': 'bezier'
}
}
],
elements: {
nodes: [
{ data: { id: 'n0', label: "Zero", weight: 4 } },
{ data: { id: 'n1', label: "One", weight: 4 } },
{ data: { id: 'n2', label: "Two", weight: 9 } },
{ data: { id: 'n3', label: "Three", weight: 9 } },
{ data: { id: 'n4', label: "Four", weight: 1 } },
{ data: { id: 'n5', label: "Five", weight: 2 } },
{ data: { id: 'n6', label: "Six", weight: 2 } },
{ data: { id: 'n7', label: "Seveb", weight: 5 } },
{ data: { id: 'n8', label: "Eight", weight: 15 } },
{ data: { id: 'n9', label: "Nine", weight: 8} },
{ data: { id: 'n10', label: "Ten", weight: 9 } },
{ data: { id: 'n11', label: "Eleven", weight: 0 } },
{ data: { id: 'n12', label: "Twelve", weight: 3} },
{ data: { id: 'n13', label: "Thirteen", weight: 4} },
{ data: { id: 'n14', label: "Fourteen", weight: 5} },
{ data: { id: 'n15', label: "Sifthteen", weight: 6 } },
{ data: { id: 'n16', label: "Sixteen", weight: 7 } }
],
edges: [
{ data: { source: 'n0', target: 'n1' } },
{ data: { source: 'n0', target: 'n2' } },
{ data: { source: 'n0', target: 'n15' } },
{ data: { source: 'n3', target: 'n8' } },
{ data: { source: 'n3', target: 'n5' } },
{ data: { source: 'n3', target: 'n4' } },
{ data: { source: 'n6', target: 'n7' } },
{ data: { source: 'n6', target: 'n8' } },
{ data: { source: 'n6', target: 'n9' } },
{ data: { source: 'n6', target: 'n10' } },
{ data: { source: 'n11', target: 'n12' } },
{ data: { source: 'n11', target: 'n13' } },
{ data: { source: 'n11', target: 'n14' } },
{ data: { source: 'n11', target: 'n15' } },
{ data: { source: 'n11', target: 'n16' } },
{ data: { source: 'n11', target: 'n2' } }
]
}
});
});
</script>
</head>
<body>
<h1>cytoscape-multilayer demo</h1>
<div id="cy"></div>
</body>
</html>