<!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="./data/WorldCup2014.js"></script>
<style type="text/css">
#mynetwork {
width: 800px;
height: 800px;
border: 1px solid lightgray;
}
</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. <br/>
<br/><br/>
To improve performance, the physics have been disabled with:
<br/><code>{barnesHut: {gravitationalConstant: 0, centralGravity: 0,
springConstant: 0}}</code><br/> and we have enabled
the toggle hideEdgesOnDrag.
<br/><br/>
</div>
Smooth curve type:
<select id="dropdownID">
<option value="continuous">continuous</option>
<option value="discrete">discrete</option>
<option value="diagonalCross">diagonalCross</option>
<option value="straightCross">straightCross</option>
<option value="horizontal">horizontal</option>
<option value="vertical">vertical</option>
<option value="curvedCW">curvedCW</option>
<option value="curvedCCW">curvedCCW</option>
</select><br/>
inheritColor option:
<select id="inheritColor">
<option value="from">from / true</option>
<option value="to">to</option>
<option value="false">false</option>
</select><br/>
Roundness (0..1): <input type="range" min="0" max="1" value="0.5" step="0.05"
style="width:200px" id="roundnessSlider"> <input
id="roundnessScreen" value="0.5"> (0.5 is max roundness for continuous, 1.0
for the others)
<br/>
Hide edges on drag: <input type="checkbox" checked="checked"
id="hideEdgesOnDrag" /><br/>
Hide nodes on drag: <input type="checkbox" id="hideNodesOnDrag" />
<div id="mynetwork"></div>
<script type="text/javascript">
var dropdown = document.getElementById("dropdownID");
dropdown.onchange = update;
var roundnessSlider = document.getElementById("roundnessSlider");
roundnessSlider.onchange = update;
var roundnessScreen = document.getElementById("roundnessScreen");
var hideEdgesOnDrag = document.getElementById("hideEdgesOnDrag");
hideEdgesOnDrag.onchange = update;
var hideNodesOnDrag = document.getElementById("hideNodesOnDrag");
hideNodesOnDrag.onchange = update;
var inheritColor = document.getElementById("inheritColor");
inheritColor.onchange = redrawAll;
var network;
function redrawAll() {
network = null;
var inheritColorVal = inheritColor.value;
var container = document.getElementById('mynetwork');
var options = {
nodes: {
shape: 'dot',
scaling: {
min: 10,
max: 30
},
font: {
size: 12,
face: 'Tahoma'
}
},
edges: {
width: 0.15,
color: {
inherit: (inheritColorVal == 'false') ? false : inheritColorVal
},
smooth: {
dynamic: false,
type: 'continuous'
}
},
interaction: {
tooltipDelay: 200
},
rendering: {
hideEdgesOnDrag: true
},
physics: false
};
// Note: data is coming from ./data/WorldCup2014.js
network = new vis.Network(container, data, options);
}
function update() {
var type = dropdown.value;
var roundness = parseFloat(roundnessSlider.value);
roundnessScreen.value = roundness;
var options = {
edges: {
smooth: {
type: type,
roundness: roundness
}
},
rendering: {
hideEdgesOnDrag: hideEdgesOnDrag.checked,
hideNodesOnDrag: hideNodesOnDrag.checked
}
};
network.setOptions(options);
}
redrawAll()
</script>
</body>
</html>