- <!DOCTYPE html>
- <html>
- <head>
- <script src="../dist/vis.js"></script>
- <link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/vis/4.9.0/vis.min.css">
-
- <style>
- #mynetwork {
- width: 1400px;
- height: 800px;
- border: 1px solid gray;
- }
- </style>
- </head>
- <body onload="draw();">
- <script src="https://rawgit.com/Tooa/6e17f2d7b8e34ef94719/raw/a10096a6b88c992c57d032b1ed3079d7cc4b1f51/data.js"></script>
- <div id="mynetwork"></div>
- <script>
-
- for (var i = 0; i < nodes.length; i++) {
- nodes[i].mass = Math.ceil(2000* nodes[i].value);
- }
-
- var nodesDataset = new vis.DataSet(nodes);
- var edgesDataset = new vis.DataSet(edges);
-
- function redrawAll() {
- var container = document.getElementById('mynetwork');
- var options = {
- nodes: {
- borderWidth:4,
- color: {
- border: '#406897',
- background: '#6AAFFF'
- },
- scaling: {
- min: 10,
- max: 200,
- label: {
- min: 50,
- max: 100,
- drawThreshold: 10,
- maxVisible: 60
- }
- },
- font: {
- size: 20,
- color:'#000000'
- },
- shapeProperties: {
- useBorderWithImage: true
- },
- },
- edges: {
- scaling: {
- min: 2,
- max: 50
- },
- color: { inherit: 'from' },
- smooth: {
- type: 'continuous'
- }
- },
- physics: {
- "barnesHut": {
- "gravitationalConstant": -19050,
- "centralGravity": 1.3,
- "springLength": 170,
- "springConstant": 0.035,
- "damping": 0.23
- },
- "minVelocity": 0.75,
- stabilization: {
- enabled: false,
- iterations: 2000,
- updateInterval: 25
- }
- },
- configure:'physics',
- interaction: {
- tooltipDelay: 200,
- hideEdgesOnDrag: true
- },
- layout:{improvedLayout:false}
- };
-
- network = new vis.Network(container, {nodes: nodesDataset, edges: edgesDataset}, options);
-
- }
- redrawAll();
-
-
- </script>
- </body>
- </html>
|
