view test-data/cytoscape.html @ 2:d6281dc90e20 draft default tip

Uploaded
author dereeper
date Wed, 09 Jun 2021 16:54:15 +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>