Parallel

styles

This example shows how Ogma can displays multiple edges between two nodes using curved edges. To make sure that edges from A to B and B to A are drawn separately, use the directedEdges option.

index.tsindex.htmlstyles.css

import Ogma from '@linkurious/ogma';

const NB_EDGES = 5;

const ogma = new Ogma({
  container: 'graph-container'
});

const D = 50;
ogma.addNodes([
  { id: 'n0', attributes: { x: -D, y: -D } },
  { id: 'n1', attributes: { x: D, y: D } }
]);

for (let i = 0; i < NB_EDGES; i++) {
  ogma.addEdge({
    id: 'e' + i,
    source: 'n0',
    target: 'n1'
  });
}

await ogma.view.locateGraph();

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;
}

Parallel ​

Parallel