Appearance

  2. Examples

Local Radial ​

layoutalgorithmstransport-networkssocial-networksinteractions

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

ts
import Ogma from '@linkurious/ogma';

const ogma = new Ogma({
  container: 'graph-container',
  options: {
    interactions: { drag: { enabled: false } }
  }
});

// Generate a balanced tree graph
ogma.generate
  .balancedTree({
    children: 2,
    height: 6
  })
  .then(async graph => {
    // Assign it to Ogma
    await ogma.setGraph(graph);
    await ogma.view.locateGraph();

    // Remove the root node
    await ogma.removeNode(0);

    // Get the right tree and show its root in orange
    await ogma.getNode(2)!.setAttributes({ color: 'orange' });

    const rightTree = ogma.getNode(2)!.getConnectedComponent();

    // Apply a radial layout on the root node of the right tree
    await ogma.layouts.radial({
      centralNode: 2,
      nodes: rightTree,
      radiusDelta: 20,
      duration: 1000,
      locate: true
    });
  });
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;
}