Appearance
Local force
This example shows how to use the local force layout algorithm on a subgraph. Press "ctrl" and select some nodes with the lasso tool using the mouse. Only the selected nodes will be moved by the layout. You can also take the pinned
nodes into account, allowing the algorithm to avoid them when placing the other nodes.
ts
import Ogma from '@linkurious/ogma';
const ogma = new Ogma({
container: 'graph-container'
});
ogma.generate
.barabasiAlbert({
nodes: 100,
m0: 10,
m: 1
})
.then(graph => {
ogma.setGraph(graph);
ogma.view.locateGraph();
});
ogma.events.on('dragStart', () => {
if (ogma.keyboard.isKeyPressed('ctrl')) {
ogma.tools.lasso.enable();
}
});
ogma.events.on('nodesSelected', () => {
const pinUnselected = (
document.getElementById('pin-unselected') as HTMLInputElement
).checked;
// reset the pinning flag on all nodes
ogma.getNodes().setAttribute('layoutable', true);
let nodes = ogma.getSelectedNodes();
if (pinUnselected) {
// include all the nodes for the layout
nodes = ogma.getNodes();
// 'pin' the rest of the nodes
ogma.getSelectedNodes().inverse().setAttribute('layoutable', false);
}
ogma.layouts.force({ nodes: nodes }).then(() => {
return ogma.view.locateGraph({
easing: 'linear',
duration: 300
});
});
});
// re-enable lasso when nodes are unselected
ogma.events.on('nodesUnselected', () => {
ogma.tools.lasso.enable();
});
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>
<div class="control">
<label>
<input type="checkbox" checked id="pin-unselected" /> Pin remaining
nodes
</label>
</div>
<script type="module" src="index.ts"></script>
</body>
</html>
css
html,
body {
margin: 0;
padding: 0;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
#graph-container {
top: 0;
bottom: 0;
left: 0;
right: 0;
position: absolute;
margin: 0;
overflow: hidden;
}
.control {
position: absolute;
top: 20px;
right: 20px;
padding: 15px;
background: #ffffff;
border-radius: 5px;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
}