Mon 21 Jul 22:43:21 CEST 2025

2025-07-21 22:57:41 +02:00 · 2025-07-21 22:57:41 +02:00 · ce6662d63c
commit ce6662d63c
parent b6f3484188
1 changed files with 97 additions and 0 deletions
--- a/js/dos/ext/vis/examples/network/edgeStyles/smoothWorldCup.html
+++ b/js/dos/ext/vis/examples/network/edgeStyles/smoothWorldCup.html
@ -0,0 +1,97 @@
+<!doctype html>
+<!-- saved from url=(0044)http://kenedict.com/networks/worldcup14/vis/ , thanks Andre!-->
+<html>
+<head>
+  <meta http-equiv="content-type" content="text/html; charset=UTF8">
+  <title>Network | Static smooth curves - World Cup Network</title>
+
+  <script type="text/javascript" src="../../../dist/vis.js"></script>
+  <link type="text/css" rel="stylesheet" href="../../../dist/vis.css">
+
+  <script src="../datasources/WorldCup2014.js"></script>
+
+  <style type="text/css">
+    #mynetwork {
+      width: 800px;
+      height: 800px;
+      border: 1px solid lightgray;
+    }
+    #optionsContainer {
+      height:280px;
+    }
+  </style>
+  <script src="../../googleAnalytics.js"></script>
+</head>
+
+<body>
+
+<h2>Static smooth curves - World Cup Network</h2>
+
+<div style="width:700px; font-size:14px;">
+  The static smooth curves are based only on the positions of the connected
+  nodes.
+  There are multiple ways to determine the way this curve is drawn.
+  This example shows the effect of the different types on a large network.
+  <br/> <br/>
+  Also shown in this example is the inheritColor option of the edges as well as
+  the roundness factor. Because the physics has been disabled, the dynamic smooth curves do not work here.
+</div>
+
+<div id="optionsContainer"></div>
+
+<div id="mynetwork"></div>
+
+<script type="text/javascript">
+  var network;
+
+  function redrawAll() {
+    var container = document.getElementById('mynetwork');
+    var options = {
+      nodes: {
+        shape: 'dot',
+        scaling: {
+          min: 10,
+          max: 30
+        },
+        font: {
+          size: 12,
+          face: 'Tahoma'
+        }
+      },
+      edges: {
+        color:{inherit:true},
+        width: 0.15,
+        smooth: {
+          type: 'continuous'
+        }
+      },
+      interaction: {
+        hideEdgesOnDrag: true,
+        tooltipDelay: 200
+      },
+      configure: {
+        filter: function (option, path) {
+          if (option === 'inherit') {return true;}
+          if (option === 'type' && path.indexOf("smooth") !== -1) {return true;}
+          if (option === 'roundness') {return true;}
+          if (option === 'hideEdgesOnDrag') {return true;}
+          if (option === 'hideNodesOnDrag') {return true;}
+          return false;
+        },
+        container: document.getElementById('optionsContainer'),
+        showButton: false
+      },
+      physics: false
+    };
+
+    var data = {nodes:nodes, edges:edges};
+    // Note: data is coming from ./data/WorldCup2014.js
+    network = new vis.Network(container, data, options);
+  }
+
+  redrawAll()
+
+</script>
+
+</body>
+</html>