|
|
| (214 intermediate revisions by the same user not shown) |
| Line 1: |
Line 1: |
| | <html> | | <html> |
| | <head> | | <head> |
| − | <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vis/4.20.1/vis.min.js"></script>
| + | <style> |
| − | <link href="https://cdnjs.cloudflare.com/ajax/libs/vis/4.20.1/vis.min.css" rel="stylesheet" type="text/css" />
| + | div#content{ display: none; } |
| − | | + | </style> |
| − | <style type="text/css">
| + | <script> |
| − | #mynetwork {
| + | sessionStorage.setItem('LINK', 'Collaborations'); |
| − | width: 700px;
| + | window.location.href = 'https://2017.igem.org/Team:Greece/Achievements'; |
| − | height: 800px;
| + | </script> |
| − | border: 1px solid lightgray;
| + | |
| − | }
| + | |
| − | </style>
| + | |
| | </head> | | </head> |
| − | <body>
| |
| − | <div id="mynetwork"></div>
| |
| − |
| |
| − | <script type="text/javascript">
| |
| − | // create an array with nodes
| |
| − | var nodes = new vis.DataSet([
| |
| − | {id: 1, label: 'Node 1'},
| |
| − | {id: 2, label: 'Node 2'},
| |
| − | {id: 3, label: 'Node 3'},
| |
| − | {id: 4, label: 'Node 4'},
| |
| − | {id: 5, label: 'Node 5'}
| |
| − | ]);
| |
| − |
| |
| − | // create an array with edges
| |
| − | var edges = new vis.DataSet([
| |
| − | {from: 1, to: 3},
| |
| − | {from: 1, to: 2},
| |
| − | {from: 2, to: 4},
| |
| − | {from: 2, to: 5}
| |
| − | ]);
| |
| − |
| |
| − | // create a network
| |
| − | var container = document.getElementById('mynetwork');
| |
| − |
| |
| − | // provide the data in the vis format
| |
| − | var data = {
| |
| − | nodes: nodes,
| |
| − | edges: edges
| |
| − | };
| |
| − |
| |
| − | //Options for each thing in network (styles etc)
| |
| − | var options = {
| |
| − | nodes:{
| |
| − | borderWidth: 1,
| |
| − | borderWidthSelected: 2,
| |
| − | brokenImage:'https://cldup.com/0IRxBwvTKJ.png',
| |
| − | chosen: true,
| |
| − | color: {
| |
| − | border: '#2B7CE9',
| |
| − | background: '#ffffff',
| |
| − | highlight: {
| |
| − | border: '#2B7CE9',
| |
| − | background: '#D2E5FF'
| |
| − | },
| |
| − | hover: {
| |
| − | border: '#2B7CE9',
| |
| − | background: '#D2E5FF'
| |
| − | }
| |
| − | },
| |
| − | fixed: {
| |
| − | x:false,
| |
| − | y:false
| |
| − | },
| |
| − | font: {
| |
| − | color: '#343434',
| |
| − | size: 14, // px
| |
| − | face: 'arial',
| |
| − | background: 'none',
| |
| − | strokeWidth: 0, // px
| |
| − | strokeColor: '#ffffff',
| |
| − | align: 'center',
| |
| − | multi: false,
| |
| − | vadjust: 0,
| |
| − | bold: {
| |
| − | color: '#343434',
| |
| − | size: 14, // px
| |
| − | face: 'arial',
| |
| − | vadjust: 0,
| |
| − | mod: 'bold'
| |
| − | },
| |
| − | ital: {
| |
| − | color: '#343434',
| |
| − | size: 14, // px
| |
| − | face: 'arial',
| |
| − | vadjust: 0,
| |
| − | mod: 'italic',
| |
| − | },
| |
| − | boldital: {
| |
| − | color: '#343434',
| |
| − | size: 14, // px
| |
| − | face: 'arial',
| |
| − | vadjust: 0,
| |
| − | mod: 'bold italic'
| |
| − | },
| |
| − | mono: {
| |
| − | color: '#343434',
| |
| − | size: 15, // px
| |
| − | face: 'courier new',
| |
| − | vadjust: 2,
| |
| − | mod: ''
| |
| − | }
| |
| − | },
| |
| − | group: undefined,
| |
| − | heightConstraint: false,
| |
| − | hidden: false,
| |
| − | icon: {
| |
| − | face: 'FontAwesome',
| |
| − | code: undefined,
| |
| − | size: 50, //50,
| |
| − | color:'#2B7CE9'
| |
| − | },
| |
| − | image: 'https://cldup.com/0IRxBwvTKJ.png',
| |
| − | label: undefined,
| |
| − | labelHighlightBold: true,
| |
| − | level: undefined,
| |
| − | mass: 1,
| |
| − | physics: true,
| |
| − | scaling: {
| |
| − | min: 10,
| |
| − | max: 30,
| |
| − | label: {
| |
| − | enabled: false,
| |
| − | min: 14,
| |
| − | max: 30,
| |
| − | maxVisible: 30,
| |
| − | drawThreshold: 5
| |
| − | },
| |
| − | customScalingFunction: function (min,max,total,value) {
| |
| − | if (max === min) {
| |
| − | return 0.5;
| |
| − | }
| |
| − | else {
| |
| − | let scale = 1 / (max - min);
| |
| − | return Math.max(0,(value - min)*scale);
| |
| − | }
| |
| − | }
| |
| − | },
| |
| − | shadow:{
| |
| − | enabled: false,
| |
| − | color: 'rgba(0,0,0,0.5)',
| |
| − | size:10,
| |
| − | x:5,
| |
| − | y:5
| |
| − | },
| |
| − | shape: 'circularImage',
| |
| − | shapeProperties: {
| |
| − | borderDashes: false, // only for borders
| |
| − | borderRadius: 6, // only for box shape
| |
| − | interpolation: false, // only for image and circularImage shapes
| |
| − | useImageSize: false, // only for image and circularImage shapes
| |
| − | useBorderWithImage: false // only for image shape
| |
| − | },
| |
| − | size: 25,
| |
| − | title: undefined,
| |
| − | value: undefined,
| |
| − | widthConstraint: false
| |
| − | }
| |
| − | };
| |
| − |
| |
| − | // initialize your network!
| |
| − | var network = new vis.Network(container, data, options);
| |
| − | console.log(typeof(network))
| |
| − | console.log(network)
| |
| − | </script>
| |
| − |
| |
| − | <!-- Styling Script -->
| |
| − | <script>
| |
| − | //Changes shall apply under void()
| |
| − | // Upper black toolbar stays there id = 'top_menu_14' -> Could be display:block
| |
| − | // Main div wrapper contains code and all other stuff id = 'content' -> Change id to 'content2'
| |
| − | // Reason: iGEM puts everything in document.getElementById('content') - change id - cause element 404
| |
| − | void(document.getElementById('content').id = 'content0')
| |
| − |
| |
| − | // Div (placeholder) containing the iGEM logo and some text id = 'top_title' -> Apply display: none
| |
| − | void(document.getElementById('top_title').style.display = 'none');
| |
| − |
| |
| − | // Small icon in the top black toolbar id = 'bars_item' -> Apply display: none
| |
| − | void(document.getElementById('bars_item').style.display = 'none');
| |
| − | // Same application for it's side effect (display an ugly div by default)
| |
| − |
| |
| − | void(document.getElementById('user_item').style.display = 'none');
| |
| − | void(document.getElementById('sideMenu').style.display = 'none');
| |
| − | var element = document.getElementById('home_logo');
| |
| − | element.outerHTML = '';
| |
| − | delete element;
| |
| − | </script>
| |
| − | </body>
| |
| | </html> | | </html> |
