Appearance
Load graph
This example shows how to load a graph using the Ogma constructor.
ts
import Ogma, { RawGraph } from '@linkurious/ogma';
// Custom function that generates a graph.
const randomGraph = (N: number, E: number) => {
const g: RawGraph = { nodes: [], edges: [] };
for (let i = 0; i < N; i++) {
g.nodes.push({
id: 'n' + i,
attributes: {
x: Math.random() * 100,
y: Math.random() * 100,
text: 'n' + i,
radius: 5 + 10 * Math.random()
}
});
}
for (let i = 0; i < E; i++) {
g.edges.push({
id: 'e' + i,
source: 'n' + ((Math.random() * N) | 0),
target: 'n' + ((Math.random() * N) | 0),
attributes: { text: 'edge' + i }
});
}
return g;
};
// Generate a random graph with the randomGraph function defined above.
const ogma = new Ogma({
graph: randomGraph(10, 10), // load the graph at init
container: 'graph-container'
});
ogma.addEdges([
{ source: 'n0', target: 'n0' },
{ source: 'n0', target: 'n0' }
]);
// Alternatively:
//const ogma = new Ogma({
// container: 'graph-container'
//});
// ogma.setGraph(g);
//// or:
// ogma.addNodes(g.nodes);
// ogma.addEdges(g.edges);
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.ts"></script>
</body>
</html>
css
#graph-container {
top: 0;
bottom: 0;
left: 0;
right: 0;
position: absolute;
margin: 0;
overflow: hidden;
}