Appearance

  2. Examples

Local concentric ​

layoutalgorithmssocial-networkstransport-networks

This example shows how to use the concentric layout algorithm on a subgraph.

Press "ctrl" and select some nodes with the lasso tool using the mouse. The nodes will be positioned as a circles around the central node in the selection.

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

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

ogma.generate
  .random({
    nodes: 100,
    edges: 100
  })
  .then(graph => {
    ogma.setGraph(graph);
    ogma.view.locateGraph();
  });

ogma.events.on('dragStart', () => {
  if (ogma.keyboard.isKeyPressed('ctrl')) {
    ogma.tools.lasso.enable();
  }
});

// return the node in the center of the selected set
const getCentralNode = (nodes: NodeList) => {
  const bbox = nodes.getBoundingBox();
  let centralNode: Node = ogma.getNodes().get(0);
  nodes.reduce((shortest, node) => {
    const position = node.getPosition();
    const dist = Ogma.geometry.distance(
      position.x,
      position.y,
      bbox.cx,
      bbox.cy
    );
    if (dist < shortest) {
      centralNode = node;
      shortest = dist;
    }
    return shortest;
  }, Infinity);
  return centralNode;
};

ogma.events.on('nodesSelected', evt => {
  const centralNode = getCentralNode(evt.nodes).getId();
  ogma.layouts
    .concentric({
      nodes: evt.nodes,
      centralNode: centralNode
    })
    .then(() => {
      ogma.view.locateGraph({
        easing: 'linear',
        duration: 300
      });
    });
});
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;
}