Position

This example shows how to use the text position attribute to change the position of the text on nodes.

index.tsindex.htmlstyles.css

import Ogma, { TextPosition } from '@linkurious/ogma';

const POSITION: TextPosition[] = ['center', 'left', 'top', 'right', 'bottom'];

const ogma = new Ogma({
  container: 'graph-container',
  graph: {
    nodes: [
      { id: 0, attributes: { x: 0, y: 0 } },
      { id: 1, attributes: { x: 40, y: 0 } },
      { id: 2, attributes: { x: 80, y: 0 } },
      { id: 3, attributes: { x: 120, y: 0 } },
      { id: 4, attributes: { x: 160, y: 0 } }
    ]
  }
});

ogma.styles.addRule({
  nodeAttributes: {
    text: {
      position: node => POSITION[+node.getId()],
      content: node => 'Node ' + node.getId(),
      minVisibleSize: 0
    }
  }
});

html

<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />

    <link type="text/css" rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <div id="graph-container"></div>
    <script type="module" src="index.ts"></script>
  </body>
</html>

css

#graph-container {
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  position: absolute;
  margin: 0;
  overflow: hidden;
}

Position ​

Position