Appearance

  2. Examples

Multiple instances ​

ui

This example shows how to have multiple Ogma instances wihtin the same page.
Each instance has its own graph, styles transformations etc. Though, you can syncrhonise them via the events api.

ts
import Ogma from '@linkurious/ogma';

[
  'graph-container-top-left',
  'graph-container-bottom-left',
  'graph-container-top-right',
  'graph-container-bottom-right'
].forEach(async (container, i) => {
  const ogma = new Ogma({
    container
  });
  const graph = await ogma.generate.random({ nodes: 20, edges: 50 });
  const c = i * 20 + 1;
  const color = `#${c}${c}${c}`;
  await ogma.setGraph(graph);
  await ogma.getNodes().setAttribute('color', color);
  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-top-left"></div>
    <div id="graph-container-bottom-left"></div>
    <div id="graph-container-top-right"></div>
    <div id="graph-container-bottom-right"></div>
    <script type="module" src="index.ts"></script>
  </body>
</html>
css
:root {
  --border: 1px solid rgba(0, 0, 0, 0.1);
}

#graph-container-top-left {
  top: 0;
  height: 50%;
  left: 0;
  width: 50%;
  position: absolute;
}
#graph-container-bottom-left {
  top: 50%;
  bottom: 0;
  left: 0;
  width: 50%;
  position: absolute;
  border-top: var(--border);
}
#graph-container-top-right {
  top: 0;
  height: 50%;
  left: 50%;
  right: 0;
  position: absolute;
  border-left: var(--border);
}
#graph-container-bottom-right {
  top: 50%;
  bottom: 0;
  left: 50%;
  right: 0;
  position: absolute;
  border-top: var(--border);
  border-left: var(--border);
}