Font
Open in a new window.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link
href="https://fonts.googleapis.com/css2?family=Noto+Serif&family=Roboto&family=Ubuntu&family=Merriweather&display=swap"
rel="stylesheet">
<script src="../build/ogma.min.js"></script>
<style>
#graph-container {
top: 0;
bottom: 0;
left: 0;
right: 0;
position: absolute;
margin: 0;
overflow: hidden;
}
</style>
</head>
<body>
<div id="graph-container"></div>
<script>
'use strict';
var ogma = new Ogma({
container: 'graph-container'
});
const nodeFonts = ['Roboto', 'Ubuntu'];
const edgeFonts = ['Noto Serif', 'Merriweather'];
ogma.styles.addNodeRule({
text: {
font: function (node) {
return nodeFonts[node.getId() % nodeFonts.length];
},
minVisibleSize: 5,
size: 14,
content: function (node) {
const id = node.getId();
const fontName = nodeFonts[id % nodeFonts.length];
return fontName + ' ' + id;
}
}
});
ogma.styles.addEdgeRule({
text: {
font: function (edge) {
return edgeFonts[edge.getId() % edgeFonts.length];
},
minVisibleSize: 0,
size: 14,
content: function (edge) {
const id = edge.getId();
const fontName = edgeFonts[id % edgeFonts.length];
return fontName + ' ' + id;
}
}
});
ogma.generate
.random({ nodes: 15, edges: 15 })
.then(ogma.setGraph)
.then(function () {
return ogma.layouts.force({ charge: 150, locate: true });
});
</script>
</body>
</html>
