master

分支 (2)

管理

管理

master

remove-window.cy

cytoscape.js-avsdf
/
demo.html

<!DOCTYPE>

<html>

	<head>
		<title>cytoscape-avsdf.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>

		<!--polyfills are needed for this extension for old browsers like IE -->
		<script src="https://cdnjs.cloudflare.com/ajax/libs/core-js/2.5.7/shim.min.js"></script>

		<script src="https://unpkg.com/layout-base/layout-base.js"></script>
		<script src="https://unpkg.com/avsdf-base/avsdf-base.js"></script>
		<script src="cytoscape-avsdf.js"></script>

		<style>
			body {
				font-family: helvetica;
				font-size: 15px;
			}

			#cy {
				width: 100%;
				height: 90%;
				z-index: 999;
			}

			h1 {
				opacity: 0.5;
				font-size: 1em;
				font-weight: bold;
			}

			button {
				font-size: 15px;
				margin-right: 10px;
			}

			.line {
				clear:left;
				height:25px;
				margin-top:6px;
				margin-right:6px;
				margin-bottom:6px;
			}

			.radio {
				margin-left:25px;
			}

		</style>

		<script>
			document.addEventListener('DOMContentLoaded', function(){

				var cy = window.cy = cytoscape({
					container: document.getElementById('cy'),

					layout: {
						name: 'avsdf',
						nodeSeparation: 120
					},

					style: [
						{
							selector: 'node',
							style: {
								'label': 'data(id)',
								'text-valign': 'center',
								'color': '#000000',
								'background-color': '#3a7ecf'
							}
						},

						{
							selector: 'edge',
							style: {
								'width': 2,
								'line-color': '#3a7ecf',
								'opacity': 0.5
							}
						}
					],

					elements: {
						nodes: [
							{ data: { id: 'v1', weight: 1} },
							{ data: { id: 'v2', weight: 2} },
							{ data: { id: 'v3', weight: 3} },
							{ data: { id: 'v4', weight: 4} },
							{ data: { id: 'v5', weight: 5} },
							{ data: { id: 'v6', weight: 6} },
							{ data: { id: 'v7', weight: 7} }
						],
						edges: [
							{ data: { source: 'v1', target: 'v2', directed: 'false'} },
							{ data: { source: 'v1', target: 'v4', directed: 'false'} },
							{ data: { source: 'v1', target: 'v5', directed: 'false'} },
							{ data: { source: 'v2', target: 'v4', directed: 'false'} },
							{ data: { source: 'v2', target: 'v6', directed: 'false'} },
							{ data: { source: 'v3', target: 'v4', directed: 'false'} },
							{ data: { source: 'v3', target: 'v7', directed: 'false'} },
							{ data: { source: 'v4', target: 'v5', directed: 'false'} },
							{ data: { source: 'v4', target: 'v7', directed: 'false'} },
							{ data: { source: 'v5', target: 'v6', directed: 'false'} },
							{ data: { source: 'v6', target: 'v7', directed: 'false'} },
							{ data: { source: 'v6', target: 'v3', directed: 'false'} }
						]
					}
				});

				document.getElementById("layoutButton").addEventListener("click", function(){
					if(document.getElementById("end").checked) {
						var layout = cy.layout({
							name: 'avsdf',
							animate: "end",
							animationDuration: 1000,
							animationEasing: 'ease-in-out',
							nodeSeparation: 120
						});
					} else{
						var layout = cy.layout({
							name: 'avsdf',
							refresh: 1,
							animate: "during",
							animationDuration: 1000,
							animationEasing: 'ease-in-out',
							nodeSeparation: 120
						});
					}
					layout.run();
				});

				document.getElementById("randomize").addEventListener("click", function(){
					cy.nodes().forEach(function(ele){
						ele.data().weight = Math.floor((Math.random() * 10) + 1);
					});

					var layout = cy.layout({
						name: 'circle',
						animate: true,
						sort: function(a, b){ return a.data('weight') - b.data('weight') },
						radius: 120,
						animationDuration: 1000,
						animationEasing: 'ease-in-out'
					});
					layout.run();
				});

			});
		</script>
	</head>

	<body>
		<h1>cytoscape-avsdf demo</h1>
		<div class="line">
			Animation Type:
			<input type="radio" name="radio" id="end" class="radio" value="end" checked> End
			<input type="radio" name="radio" id="during" class="radio" value="during"> During <br>
		</div>
		<a data-toggle="tooltip" data-placement="auto" title="Places the nodes circularly as a randomly permuted sequence">
			<button id="randomize" type="button">Randomize</button>
		</a>
		<a data-toggle="tooltip" data-placement="auto" title="Places the nodes circularly with respect to AVSDF layout">
		<button id="layoutButton" type="button">AVSDF</button>
		</a>

		<div id="cy"></div>

	</body>

</html>