Appearance
Continuous ForceLink
This example shows how to use the continuous option with the forceLink layout to create organic animations while the nodes are being layed out.
js
import Ogma from '@linkurious/ogma';
const ogma = new Ogma({
container: 'graph-container'
});
ogma.generate
.barabasiAlbert({
nodes: 200,
m0: 20,
m: 1
})
.then(graph => {
ogma.setGraph(graph);
ogma.view.locateGraph();
ogma.layouts.forceLink({
// layout parameters
autoStop: false,
iterationsPerRender: 1,
startingIterations: 10,
slowDown: 4,
// allow continuous updates
continuous: true
});
// Simulate a manual stop from the user.
setTimeout(() => {
ogma.layouts.stop();
ogma.view.locateGraph({ duration: 500 });
}, 5000);
});
html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link type="text/css" rel="stylesheet" href="styles.css">
</head>
<body>
<div id="graph-container"></div>
<script src="index.js"></script>
</body>
</html>
css
#graph-container {
top: 0;
bottom: 0;
left: 0;
right: 0;
position: absolute;
margin: 0;
overflow: hidden;
}