Appearance
Centered
This example shows how to use the position attribute on edge texts to display them at the center of the edges.
ts
import Ogma from '@linkurious/ogma';
const ogma = new Ogma({
container: 'graph-container'
});
ogma.addNodes([
{
id: 0,
attributes: {
x: 10,
y: 0
}
},
{ id: 1, attributes: { x: -10, y: 0 } }
]);
ogma.addEdges([
{
id: 0,
source: 0,
target: 1,
attributes: {
color: '#1499ff',
text: {
style: 'bold',
color: '#fefefe',
content: 'This is a centered text.',
position: 'centered',
secondary: 'This is an edge secondary text,\nit cannot be centered'
}
}
}
]);
await ogma.view.locateGraph({ padding: { bottom: 50 } });
html
<head></head>
<body>
<title>Secondary text</title>
<div
id="graph-container"
style="top: 0; bottom: 0; left: 0; right: 0; position: absolute; margin: 0"
></div>
<script type="module" src="index.ts"></script>
</body>