Centered

This example shows how to use the position attribute on edge texts to display them at the center of the edges.

index.tsindex.html

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>

Centered ​

Centered