Appearance

  2. Examples

In place resize new ​

layoutalgorithmsexpandcollapseanimations

Double-click on any node to resize it 20x.

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

// Create an instance of Ogma and bind it to the graph-container.
const ogma = new Ogma({
  container: 'graph-container'
});

ogma.styles.addRule({
  nodeAttributes: {
    radius: n => +n?.getAttribute('radius') / 2,
    innerStroke: {
      color: '#222',
      width: 0.5,
      minVisibleSize: 2,
      scalingMethod: 'scaled'
    },
    text: {
      minVisibleSize: 100
    }
  },
  edgeAttributes: {
    width: e => +e?.getAttribute('width') / 4,
    opacity: 0.5
  }
});

const duration = 250;
const easing: Easing = 'cubicOut';

const graph = await Ogma.parse.gexfFromUrl('files/arctic.gexf');

await ogma.setGraph(graph);

ogma.events.on('doubleclick', async evt => {
  if (evt.target && evt.target.isNode) {
    const focusNode = evt.target;
    const r = Number(focusNode.getAttribute('radius'));
    let K = 20;

    if (focusNode.getData('zoomed')) K = 1 / K;
    focusNode.setData('zoomed', !focusNode.getData('zoomed'));
    const deltaRadius = r * (K - 1);
    await focusNode.setAttribute('radius', r + deltaRadius);

    const nodes = ogma.getNodes();
    ogma.algorithms.fishEyeExpand({
      focusNode,
      nodes,
      deltaRadius,
      duration,
      easing
    });
  }
});
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;
}