Appearance
Secondary
This example shows how to use the secondaryText attribute on nodes and edges, allowing to display an extra text on each node and edge.
ts
import Ogma from '@linkurious/ogma';
const ogma = new Ogma({
container: 'graph-container'
});
ogma.addNodes([
{
id: 0,
attributes: {
x: 0,
y: 0,
text: { content: 'Primary text', secondary: 'Secondary text' }
}
},
{ id: 1, attributes: { x: 100, y: 0, text: 'Only primary text' } },
{
id: 2,
attributes: {
x: 50,
y: -35,
text: {
content: 'Both texts can be configured differently',
backgroundColor: 'lightgreen',
padding: 5,
size: 13,
style: 'bold',
secondary: {
content: 'Size, style, color, font, background',
size: 12,
color: 'firebrick',
backgroundColor: 'lightblue',
style: 'italic',
padding: 3
}
}
}
}
]);
ogma.addEdges([
{
id: 0,
source: 0,
target: 1,
attributes: {
text: {
content:
'This is an edge primary text,\nit is always displayed above the edge',
secondary:
'This is an edge secondary text,\nit is always displayed below the edge'
}
}
}
]);
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>