Appearance
Cycle detection
This example shows how to use the detectCycle algorithm. It makes it pulse, remove one of the edges and iterates until it has found all the cycles in the graph.
ts
import Ogma, { RawEdge } from '@linkurious/ogma';
const ogma = new Ogma({
container: 'graph-container'
});
// show directions
ogma.styles.addEdgeRule({
shape: 'arrow'
});
let removedEdges: RawEdge[] = [];
const showCycles = function () {
const cycle = ogma.algorithms.detectCycle();
if (cycle) {
// highlight cycle
const edges = cycle.getAdjacentEdges({ bothExtremities: true });
cycle.addClass('cycle');
edges.addClass('cycle');
// break cycle after a delay
setTimeout(() => {
const edge = edges.get(0);
// store edge to re-add it later
removedEdges.push({
source: edge.getSource().getId(),
target: edge.getTarget().getId()
});
ogma.removeEdge(edges.get(0));
cycle.removeClass('cycle');
edges.removeClass('cycle');
setTimeout(showCycles, 1000);
}, 5000);
} else {
// no more cycles, re-add the removed edges
ogma.addEdges(removedEdges);
removedEdges = [];
showCycles();
}
};
// pulsing style for the cycles
ogma.styles.createClass({
name: 'cycle',
edgeAttributes: {
color: 'red'
},
nodeAttributes: {
color: 'red',
pulse: {
enabled: true,
width: 10,
startColor: 'inherit'
}
}
});
const graph = await Ogma.parse.jsonFromUrl('cycles.json');
await ogma.setGraph(graph);
await ogma.view.locateGraph();
showCycles();
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 type="module" src="index.ts"></script>
</body>
</html>
css
#graph-container {
top: 0;
bottom: 0;
left: 0;
right: 0;
position: absolute;
margin: 0;
overflow: hidden;
}
json
{
"nodes": [
{
"id": "n200",
"attributes": {
"x": 39.142436225018,
"y": -0.5842154660450447,
"color": "grey",
"radius": 5,
"shape": "circle",
"text": null
}
},
{
"id": "n0",
"attributes": {
"x": 56.74036116600037,
"y": 97.1378225505352,
"color": "grey",
"radius": 11.448061400989705,
"shape": "circle",
"text": null
}
},
{
"id": "n1",
"attributes": {
"x": 92.22722430229187,
"y": 34.1048425257206,
"color": "grey",
"radius": 7.283320680384795,
"shape": "circle",
"text": null
}
},
{
"id": "n2",
"attributes": {
"x": 37.531802129745486,
"y": 52.45390073657036,
"color": "grey",
"radius": 13.114531802522045,
"shape": "circle",
"text": null
}
},
{
"id": "n3",
"attributes": {
"x": 91.67253193440872,
"y": -51.54897544412437,
"color": "grey",
"radius": 5.531087259776539,
"shape": "circle",
"text": null
}
},
{
"id": "n4",
"attributes": {
"x": 62.30529743653053,
"y": -43.91224828014665,
"color": "grey",
"radius": 13.401302636442988,
"shape": "circle",
"text": null
}
},
{
"id": "n5",
"attributes": {
"x": 10.324941574145008,
"y": -31.101552464394146,
"color": "grey",
"radius": 11.30766775542554,
"shape": "circle",
"text": null
}
},
{
"id": "n6",
"attributes": {
"x": -20.354295778274533,
"y": 5.0308317363262205,
"color": "grey",
"radius": 12.418940800685958,
"shape": "circle",
"text": null
}
},
{
"id": "n7",
"attributes": {
"x": -9.95489315986633,
"y": 35.512355130910876,
"color": "grey",
"radius": 5.136967034694411,
"shape": "circle",
"text": null
}
},
{
"id": "n8",
"attributes": {
"x": 17.32530016899109,
"y": 94.18722669482231,
"color": "grey",
"radius": 8.505061178641835,
"shape": "circle",
"text": null
}
},
{
"id": "n9",
"attributes": {
"x": 122.99585343445878,
"y": -0.37240507928022737,
"color": "grey",
"radius": 11.02846944582491,
"shape": "circle",
"text": null
}
},
{
"id": 1243635270482804,
"attributes": {
"x": 69.94264680827793,
"y": -21.971145698419313,
"color": "grey",
"radius": 5,
"shape": "circle",
"text": null
}
},
{
"id": 3588424111560522,
"attributes": {
"x": 68.33605427665405,
"y": 19.069990791245083,
"color": "grey",
"radius": 5,
"shape": "circle",
"text": null
}
},
{
"id": 1792267149295216,
"attributes": {
"x": 80.45852519708873,
"y": -89.30197816011074,
"color": "grey",
"radius": 5,
"shape": "circle",
"text": null
}
},
{
"id": 1406349046144336,
"attributes": {
"x": 20.23903582396599,
"y": 22.860775518622443,
"color": "grey",
"radius": 5,
"shape": "circle",
"text": null
}
}
],
"edges": [
{
"id": "e0",
"source": "n2",
"target": "n0",
"attributes": {
"color": "grey",
"width": 1,
"text": null
}
},
{
"id": "e1",
"source": "n9",
"target": "n1",
"attributes": {
"color": "grey",
"width": 1,
"text": null
}
},
{
"id": "e2",
"source": "n6",
"target": "n7",
"attributes": {
"color": "grey",
"width": 1,
"text": null
}
},
{
"id": "e3",
"source": "n2",
"target": "n1",
"attributes": {
"color": "grey",
"width": 1,
"text": null
}
},
{
"id": "e4",
"source": "n7",
"target": "n2",
"attributes": {
"color": "grey",
"width": 1,
"text": null
}
},
{
"id": "e5",
"source": "n4",
"target": "n3",
"attributes": {
"color": "grey",
"width": 1,
"text": null
}
},
{
"id": "e6",
"source": "n5",
"target": "n4",
"attributes": {
"color": "grey",
"width": 1,
"text": null
}
},
{
"id": "e7",
"source": "n8",
"target": "n2",
"attributes": {
"color": "grey",
"width": 1,
"text": null
}
},
{
"id": "e8",
"source": "n0",
"target": "n8",
"attributes": {
"color": "grey",
"width": 1,
"text": null
}
},
{
"id": "e9",
"so
...