Appearance

  2. Examples

Load graph ​

parsers

This example shows how to load a graph using the Ogma constructor.

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

// Custom function that generates a graph.
const randomGraph = (N: number, E: number) => {
  const g: RawGraph = { nodes: [], edges: [] };
  for (let i = 0; i < N; i++) {
    g.nodes.push({
      id: 'n' + i,
      attributes: {
        x: Math.random() * 100,
        y: Math.random() * 100,
        text: 'n' + i,
        radius: 5 + 10 * Math.random()
      }
    });
  }
  for (let i = 0; i < E; i++) {
    g.edges.push({
      id: 'e' + i,
      source: 'n' + ((Math.random() * N) | 0),
      target: 'n' + ((Math.random() * N) | 0),
      attributes: { text: 'edge' + i }
    });
  }
  return g;
};
// Generate a random graph with the randomGraph function defined above.
const ogma = new Ogma({
  graph: randomGraph(10, 10), // load the graph at init
  container: 'graph-container'
});

ogma.addEdges([
  { source: 'n0', target: 'n0' },
  { source: 'n0', target: 'n0' }
]);

// Alternatively:
//const ogma = new Ogma({
//  container: 'graph-container'
//});
// ogma.setGraph(g);
//// or:
// ogma.addNodes(g.nodes);
// ogma.addEdges(g.edges);
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 src="index.ts"></script>
  </body>
</html>
css
#graph-container {
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  position: absolute;
  margin: 0;
  overflow: hidden;
}