Appearance
PNG
This example uses the PNG export API to export the graph data as a PNG file.
ts
import Ogma from '@linkurious/ogma';
const ogma = new Ogma({
container: 'graph-container'
});
function getRandomHexColor() {
return '#' + Math.floor(Math.random() * 16777215).toString(16);
}
ogma.styles.addNodeRule({
text: { minVisibleSize: 0, content: n => n.getId() },
color: getRandomHexColor
});
const graph = await ogma.generate.random({ nodes: 20, edges: 30 });
await ogma.setGraph(graph);
await ogma.layouts.force({ locate: true, duration: 0 });
await ogma.export
.png({
download: false
})
.then(dataURL => {
// Preview image
if (dataURL) {
const img = document.createElement('img');
img.src = dataURL;
document.body.appendChild(img);
}
});
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>
<hr />
↓
<br />
<script type="module" src="index.ts"></script>
</body>
</html>
css
#graph-container,
img {
height: 300px;
}
body {
text-align: center;
}