Clear

This example shows how to clear the graph using the clear method.

index.tsindex.htmlstyles.css

import Ogma from '@linkurious/ogma';

const ogma = new Ogma({
  container: 'graph-container',
  graph: {
    nodes: [
      { id: 'n0', attributes: { x: 0, y: 0 } },
      { id: 'n1', attributes: { x: 50, y: 50 } }
    ],
    edges: [{ id: 'e0', source: 'n0', target: 'n1' }]
  }
});

// Remove the nodes and the edge after 1s
setTimeout(() => {
  ogma.clearGraph();
  setInfo();
}, 1000);

const setInfo = () => {
  document.getElementById('n')!.textContent = 'nodes: ' + ogma.getNodes().size;
  document.getElementById('e')!.textContent = 'edges: ' + ogma.getEdges().size;
};
setInfo();

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>
    <div id="n" class="info n"></div>
    <div id="e" class="info e"></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;
}

.info {
  position: absolute;
  color: #fff;
  background: #141229;
  font-size: 20px;
  font-family: monospace;
  padding: 5px;
}
.info.n {
  top: 5px;
  right: 5px;
}
.info.e {
  top: 45px;
  right: 5px;
}

Clear ​

Clear