Appearance
Performance (Github)
This example demonstrates the performances of Ogma while rendering a large graph.
ts
import Ogma from '@linkurious/ogma';
const ogma = new Ogma({
container: 'graph-container'
});
ogma.setOptions({
detect: {
// disable the detection of edges and texts, making them impossible to hover or select.
// this improves performances for large graphs
edges: false,
nodeTexts: false,
edgeTexts: false
},
interactions: {
drag: {
enabled: false // disable node dragging
}
}
});
ogma.styles.addNodeRule({
text: {
font: 'Roboto',
size: 12
},
innerStroke: {
minVisibleSize: 5
}
});
const graph = await Ogma.parse.jsonFromUrl('files/github.json');
// pre-position to see the animation
await ogma.view.locateRawGraph(graph);
// batch-add nodes and edges
await ogma.setGraph(graph, { batchSize: 2000 });
// update graph info
document.getElementById('n')!.textContent = 'nodes: ' + ogma.getNodes().size;
document.getElementById('e')!.textContent = 'edges: ' + ogma.getEdges().size;
html
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<link
href="https://fonts.googleapis.com/css?family=Roboto:400,700"
rel="stylesheet"
type="text/css"
/>
<link type="text/css" rel="stylesheet" href="styles.css" />
</head>
<body>
<div id="graph-container"></div>
<div id="n" class="info n">
loading a large graph, it can take a few seconds...
</div>
<div id="e" class="info e"></div>
<script src="index.ts" type="module"></script>
</body>
</html>
css
#graph-container {
top: 0;
bottom: 0;
left: 0;
right: 0;
position: absolute;
margin: 0;
overflow: hidden;
}
.info {
position: absolute;
color: #fff;
background: #141229;
font-size: 12px;
font-family: monospace;
padding: 5px;
}
.info.n {
top: 0;
left: 0;
}
.info.e {
top: 20px;
left: 0;
}