Secondary

text

This example shows how to use the secondaryText attribute on nodes and edges, allowing to display an extra text on each node and edge.

index.tsindex.html

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>

Secondary ​

Secondary