sbosse/jam
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Mon 21 Jul 22:43:21 CEST 2025

Browse Source
This commit is contained in:
sbosse 2025-07-21 22:57:39 +02:00
parent c805d78f98
commit b6f3484188
1 changed files with 120 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

120
js/dos/ext/vis/examples/network/edgeStyles/smooth.html Normal file
View File

@ -0,0 +1,120 @@
<!doctype html>
<html>
<head>
<title>Network | Static smooth curves</title>
<script type="text/javascript" src="../../../dist/vis.js"></script>
<link href="../../../dist/vis.css" rel="stylesheet" type="text/css" />
<style type="text/css">
#mynetwork {
width: 500px;
height: 500px;
border: 1px solid lightgray;
}
</style>
<script src="../../googleAnalytics.js"></script>
</head>
<body>
<h2>Smooth curves</h2>
<div style="width:700px; font-size:14px; text-align: justify;">
All the smooth curves in the examples so far have been using dynamic smooth curves. This means that each curve has a
support node which takes part in the physics simulation. For large networks or dense clusters, this may not be the ideal
solution. To solve this, static smooth curves have been added. 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. <br /> <br />
Drag the node around to see how the smooth curves are drawn for each setting. For animated system, we
recommend only the continuous mode. In the next example you can see the effect of these methods on a large network. Keep in mind
that the direction (the from and to) of the curve matters.
<br /> <br />
When you select the dynamic type, you can see the interaction with the fixed node and the edge, any other type will not interact with other nodes.
<br /> <br />
</div>
<p>
Smooth curve type:
<select id="dropdownID" onchange="update();">
<option value="continuous" selected="selected">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>
<option value="dynamic">dynamic</option>
<option value="none">none</option>
</select>
</p>
<p>
Roundness (0..1): <input type="range" min="0" max="1" value="0.5" step="0.05" style="width:200px" id="roundnessSlider" onchange="update();"> <input id="roundnessScreen" style="width:30px;" value="0.5"> <br>(0.5 is max roundness for continuous, 1.0 for the others)
</p>
<div id="mynetwork"></div>
<script type="text/javascript">
var dropdown = document.getElementById("dropdownID");
var roundnessSlider = document.getElementById("roundnessSlider");
var roundnessScreen = document.getElementById("roundnessScreen");
// create an array with nodes
var nodes = [
{id: 1, label: 'Fixed node', x:0, y:0, fixed:true},
{id: 2, label: 'Drag me', x:150, y:130, physics:false},
{id: 3, label: 'Obstacle', x:80, y:-80, fixed:true, mass:5}
];
// create an array with edges
var edges = [
{from: 1, to: 2, arrows:'to'}
];
// create a network
var container = document.getElementById('mynetwork');
var data = {
nodes: nodes,
edges: edges
};
var options = {
physics:true,
edges: {
smooth: {
type: 'continuous'
}
}
};
var network = new vis.Network(container, data, options);
function update() {
var type = dropdown.value;
var options;
var roundness = parseFloat(roundnessSlider.value);
roundnessScreen.value = roundness;
if (type === 'none') {
options = {
edges: {
smooth: false
}
};
}
else {
options = {
edges: {
smooth: {
type: type,
roundness: roundness
}
}
};
}
network.setOptions(options);
}
update();
</script>
</body>
</html>