Mercurial > repos > dereeper > haplophyle
view test-data/cytoscape.html @ 1:8e248dc6ad56 draft
Uploaded
author | dereeper |
---|---|
date | Wed, 09 Jun 2021 16:43:38 +0000 |
parents | 6f11162b6fa2 |
children |
line wrap: on
line source
<!DOCTYPE html> <html><head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <link href="http://sniplay.southgreen.fr/cytoscape/Pie_style/style.css" rel="stylesheet"> <meta charset="utf-8"> <meta name="viewport" content="user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, minimal-ui"> <title>Pie style</title> <script src="http://sniplay.southgreen.fr/cytoscape/Pie_style/jquery.js"></script> <script src="http://sniplay.southgreen.fr/cytoscape/Pie_style/cytoscape.js"></script> <script type="text/javascript"> $(function(){ // on dom ready $('#cy').cytoscape({ style: cytoscape.stylesheet() .selector(':selected') .css({ 'background-color': 'black', 'line-color': 'black', 'opacity': 1 }) .selector('.faded') .css({ 'opacity': 0.25, 'text-opacity': 0 }) .selector('edge') .css({ 'width': 1, 'line-color': 'black', }) .selector('node') .css({ 'width': 'mapData(width, 0, 10, 0, 100)', 'height': 'mapData(width, 0, 10, 0, 100)', 'content': 'data(id)', 'pie-size': '98%', }), elements: { nodes: [ { data: { id: 'MV1', width: 0.1} }, { data: { id: 'MV2', width: 0.1} }, { data: { id: 'MV3', width: 0.1} }, { data: { id: 'haplo1', width: 1.2000000000000002 } }, { data: { id: 'haplo2', width: 0.8 } }, { data: { id: 'haplo3', width: 5.0 } }, { data: { id: 'haplo4', width: 0.8 } }, { data: { id: 'haplo5', width: 0.8 } }, { data: { id: 'haplo6', width: 0.8 } }, { data: { id: 'haplo7', width: 0.8 } }, { data: { id: 'haplo8', width: 0.8 } }, ], edges: [ { data: { id: 'haplo7MV2', weight: 1, source: 'haplo7', target: 'MV2'} }, { data: { id: 'haplo4haplo6', weight: 1, source: 'haplo4', target: 'haplo6'} }, { data: { id: 'haplo1haplo2', weight: 1, source: 'haplo1', target: 'haplo2'} }, { data: { id: 'haplo1MV1', weight: 1, source: 'haplo1', target: 'MV1'} }, { data: { id: 'haplo4MV1', weight: 1, source: 'haplo4', target: 'MV1'} }, { data: { id: 'haplo3haplo4', weight: 1, source: 'haplo3', target: 'haplo4'} }, { data: { id: 'MV2MV3', weight: 1, source: 'MV2', target: 'MV3'} }, { data: { id: 'haplo5MV3', weight: 1, source: 'haplo5', target: 'MV3'} }, { data: { id: 'MV1MV2', weight: 1, source: 'MV1', target: 'MV2'} }, { data: { id: 'haplo8MV3', weight: 1, source: 'haplo8', target: 'MV3'} }, ] }, layout: { name: 'cose', padding: 10 }, ready: function(){ window.cy = this; } }); }); </script> </head> <body> <div id="cy"> </div>